最近公司的项目有个需求,需要使用联想查询功能。
就是一个文本输入框,在输入的时候获取值去后端模糊查询然后按照列表显示在下面。
效果如下图:

经过搜索找到这个插件,查阅资料可以完成这个功能,
即可以实现静态数据,也可以完成动态抓取显示。
使用方法如下:
(1)引入jquery-ui文件,当然还有jquery文件
(2)定义一个input标签
导入代码即可:


<script>

$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});

</script>

html标签代码
<input type="text" name="xxx" id="xxx" />

然后就是通过ajax动态请求后台数据方式如下:


$("#xxx").autocomplete({

source: function (request, response) {
$.ajax({
url: '',
type: "POST",
dataType: "json",
data: {},
success: function (data) {
that.lineData=data;
response(data);
}
});
},
minLength: 1,
scrollHeight: 1000,
autoFocus: true

});

后台返回数据类型为json数组格式

好了,到这里静态和动态的数据显示都完成了,当然为了满足自己项目肯定少不了修改相应的样式
修改的样式代码如下:


<style>

.ui-helper-hidden-accessible {display:none;}
.ui-autocomplete { position: absolute; cursor: default; border-radius: 3px; border: 1px solid #c0c0c0; }
.ui-menu {list-style: none;padding: 0;margin: 0;display: block;outline: none;}
.ui-menu .ui-menu-item a {text-decoration:none;display:block;padding:.2em .4em;line-height:1.5;zoom:1;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus,
.ui-widget-content .ui-state-focus, .ui-widget-header
.ui-state-focus {background: #5897fb;border: none;color:#000;border-radius:0;font-weight: normal;}

</style>

好了,结束。

使用juqery-ui完成联想查询功能的更多相关文章

  1. 创建ASP.NET Core MVC应用程序(5)-添加查询功能 & 新字段

    创建ASP.NET Core MVC应用程序(5)-添加查询功能 & 新字段 添加查询功能 本文将实现通过Name查询用户信息. 首先更新GetAll方法以启用查询: public async ...

  2. ASP.NET MVC系列:为视图添加查询功能

    首先,在MoviesController里添加一个查询方法,代码如下 public ActionResult SearchIndex(string title) { //查询数据库中的电影表 var ...

  3. 033医疗项目-模块三:药品供应商目录模块——供货商药品目录t添加查询功能----------Dao层和Service层和Action层和调试

    什么叫做供货商药品目录t添加查询功能?就是说我们前面的博客里面不是说供货商登录后看到了自己供应的药品了么如下: 现在供货商想要往里面添加别的药品,那么这个药品的来源就是卫生局提供的那个Ypxx表(药品 ...

  4. 学习ASP.NET Core Razor 编程系列九——增加查询功能

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  5. 通过维基API实现维基百科查询功能

    通过英文维基的免费API,可以实现对维基百科的搜索查询或者标题全文查询等,尝试了一下通过title实现全文查询,返回的结果是wikitext格式,暂时不知道该如何应用,所以仅实现了查询功能,可以返回最 ...

  6. MySQL 5.5开启慢查询功能

    vim /etc/my.cnf [mysqld] slow-query-log = on # 开启慢查询功能 slow_query_log_file = /usr/local/mysql/data/s ...

  7. 完善ext.grid.panel中的查询功能(紧接上一篇)

    今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

  8. [Architecture Pattern] Repository实作查询功能

    [Architecture Pattern] Repository实作查询功能 范例下载 范例程序代码:点此下载 问题情景 在系统的BLL与DAL之间,加入Repository Pattern的设计, ...

  9. RPM软件包管理的查询功能

    以后大家升级rpm包的时候,不要用Uvh了! 我推荐用Fvh 前者会把没有安装过得包也给装上,后者只会更新已经安装的包   总结:未安装的加上小写p,已安装的不需要加p   查询q    rpm {- ...

随机推荐

  1. LeetCode 337. House Robber III 动态演示

    每个节点是个房间,数值代表钱.小偷偷里面的钱,不能偷连续的房间,至少要隔一个.问最多能偷多少钱 TreeNode* cur mp[{cur, true}]表示以cur为根的树,最多能偷的钱 mp[{c ...

  2. 23.协程的使用场景,高I/O密集型程序

    import time def one_hundred_millionA(): start_time = time.time() i = 0 for _ in range(100000000): i ...

  3. parameterType和resultType配置错误

    自己在写mapper.xml的时候 吧parameterType和resultType的两个类搞混了 对调了一下  以至于查询了半天查询不出结果 <select id="findPat ...

  4. dp(01背包问题)

    且说上一周的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到了小Ho领取奖励的时刻了! 小Ho现在手上有M张奖券,而奖品区有N件奖品,分别标号为1到N,其中第i件奖品需要need( ...

  5. XSS——跨站脚本攻击

    跨站点脚本攻击:通过对网页注入恶意脚本,成功地被浏览器执行,来达到攻击的目的. 一.XSS攻击类型与原理1. 反射型XSS攻击非持久性攻击,黑客使用社交性的交互技巧诱导用户点击访问目标服务器的链接,但 ...

  6. 【学习总结】java数据结构和算法-第一章-内容介绍和授课方式

    总目录链接 [学习总结]尚硅谷2019java数据结构和算法 github:javaDSA 目录 几个经典算法面试题 算法和数据结构的重要性 几个经典算法面试题 字符串匹配 暴力法:慢 kmp算法:更 ...

  7. 【学习总结】Python-3-转义字符

    参考: 本教程的评论区:菜鸟教程-Python3-Python数字 转义字符: 在需要在字符中使用特殊字符时,python用反斜杠()转义字符 END

  8. Linux拷贝、移动、删除

    cp:拷贝文件或文件夹(copy) - cp original_filename copy_filename(在当前目录生成拷贝文件,并改名为copy_filename) - cp original_ ...

  9. photoshop中调整图层的颜色深浅明暗

    图像-调整-可选颜色, 选中某一个颜色如绿色,可以将绿色调的深一点或浅一点

  10. python读取pcap包

    import struct class FileConvert(object): ''' test python file''' def __init__(self): self.aa = 0 sel ...