Jquery autocomplete.js输入框联想补全功能
Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar
有两种用法,一种是直接使用页面的数据,一种是输入请求地址,请求后台返回数据
1.数据格式就是下方这种
<link href="../autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../lib/jQuery-1.4.4.min.js"></script>
<script type="text/javascript" src="../autocomplete/jquery.autocomplete.js"></script> <input type="text" value="" id="searchInput" /> <script> var emails = [
{ name: "Peter Pan", to: "peter@pan.de" },
{ name: "Molly", to: "molly@yahoo.com" },
{ name: "Forneria Marconi", to: "live@japan.jp" },
{ name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
{ name: "Don Corleone", to: "don@vegas.com" },
{ name: "Mc Chick", to: "info@donalds.org" },
{ name: "Donnie Darko", to: "dd@timeshift.info" },
{ name: "Quake The Net", to: "webmaster@quakenet.org" },
{ name: "Dr. Write", to: "write@writable.com" },
{ name: "GG Bond", to: "Bond@qq.com" },
{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }
];
$(function(){ $("#searchInput").autocomplete(emails, {
max: 5, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: $("#searchInput").width()+1, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function(row, i, max) {
return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
},
formatMatch: function(row, i, max) {
return row.name + row.to;
},
formatResult: function(row) {
return row.to;
}
}).result(function(event, row, formatted) {
alert($("#searchInput").width());
});
}); </script>
2.后台传过来的数据格式也可以是上边这种,但是需要重写下parse方法:
[{"bankCode":"111","bankName":"中国工商银行"},{"bankCode":"2","bankName":"中国银行"}]
$(function(){ $("#inbankid").autocomplete('<%=request.getContextPath() %>/protected/accountAction.do?m=searchBankName', {
max: 5, //列表里的条目数
minChars: 1, //自动完成激活之前填入的最小字符
width: $("#inbankid").width(), //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
dataType : "json",
parse: function(data){
var rows = [];
var d = data;
for(var i=0; i<d.length; i++){
rows[rows.length] = {
data:d[i],
value:d[i].bankName,
result:d[i].bankName
};
}
return rows;
},
formatItem: function(row, i, max) {
return row.bankName + '[' + row.bankCode + ']';
},
formatMatch: function(row, i, max) {
return row.bankName;
},
formatResult: function(row) {
return row.bankName;
}
}).result(function(event, row, formatted) { });
});
Jquery autocomplete.js输入框联想补全功能的更多相关文章
- 联想功能 Jquery autocomplete.js输入框联想补全功能
转载地址:https://www.cnblogs.com/jinzhiming/p/6768402.html
- jquery的输入框自动补全功能+ajax
jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链 ...
- jquery autocomplete文本自己主动补全
文本自己主动补全功能确实非常有用. 先看下简单的效果:(样式不咋会写) 以下介绍几种: 1:jqery-actocomplete.js 这个网上有个写好的实例,上面挺具体的,能够下来执行下就清楚了就不 ...
- gocode+auto-complete搭建emacs的go语言自动补全功能
上篇随笔记录了在emacs中使用go-mode和goflymake搭建了go语言的简单编程环境(推送门),今天来记录一下使用gocode+auto-complete配置emacs中go语言的自动补全功 ...
- 第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...
- 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...
- js邮箱自动补全
邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- JQuery UI Autocomplete与jquery.autocomplete.js
程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...
- javascript 实现类似百度联想输入,自动补全功能
js 实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" //点击页面隐藏自动补全提示框 document.onclick = functi ...
随机推荐
- 多线程——newFixedThreadPool线程池
newFixedThreadPool线程池: 理解: 1.固定线程数的线程池. 2.通过Executors中的静态方法创建: public static ExecutorService new ...
- Scala常用变量生命周期
val words = *** //在words被定义时取值 lazy val words = *** //在words被首次使用时取值 def words = *** //在每一次words被使用时 ...
- DLNg改善深层NN:第一周DL的实用层面
1.为什么正则化可以减少过拟合? //答:可以让模型参数变小,减小模型的方差. 在损失函数中加入正则项,在正则化时,如果参数lamda设置得足够大,那么就相当于权重系数W接近于0 ,就会减少很多隐藏单 ...
- AWS EC2 Root密码重置
- Python字典和集合的内部实现
1. 哈希表(Hash tables) 在Python中,字典是通过哈希表实现的.也就是说,字典是一个数组,而数组的索引是经过哈希函数处理后得到的.哈希函数的目的是使键均匀地分布在数组中.由于不同的键 ...
- RNN/LSTM/GRU/seq2seq公式推导
概括:RNN 适用于处理序列数据用于预测,但却受到短时记忆的制约.LSTM 和 GRU 采用门结构来克服短时记忆的影响.门结构可以调节流经序列链的信息流.LSTM 和 GRU 被广泛地应用到语音识别. ...
- Hibernate框架第一天
**框架和CRM项目的整体介绍** 1. 什么是CRM * CRM(Customer Relationship Management)客户关系管理,是利用相应的信息技术以及互联网技术来协调企业与顾客间 ...
- 《A Structured Self-Attentive Sentence Embedding》(注意力机制)
Background and Motivation: 现有的处理文本的常规流程第一步就是:Word embedding.也有一些 embedding 的方法是考虑了 phrase 和 sentence ...
- Eclipse修改编码方式
1.修改工作空间默认编码 1.修改工作空间默认编码:window -> preferences -> General -> Workspace 2.修改文件的编码 在Eclipse ...
- Unknown Treasure (卢卡斯 + 孙子定理, 模板题)
Unknown Treasure 参考链接 : https://www.cnblogs.com/linyujun/p/5199684.html 卢卡斯定理 : C(n, m) % p = C(n ...