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输入框联想补全功能的更多相关文章

  1. 联想功能 Jquery autocomplete.js输入框联想补全功能

    转载地址:https://www.cnblogs.com/jinzhiming/p/6768402.html

  2. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  3. jquery autocomplete文本自己主动补全

    文本自己主动补全功能确实非常有用. 先看下简单的效果:(样式不咋会写) 以下介绍几种: 1:jqery-actocomplete.js 这个网上有个写好的实例,上面挺具体的,能够下来执行下就清楚了就不 ...

  4. gocode+auto-complete搭建emacs的go语言自动补全功能

    上篇随笔记录了在emacs中使用go-mode和goflymake搭建了go语言的简单编程环境(推送门),今天来记录一下使用gocode+auto-complete配置emacs中go语言的自动补全功 ...

  5. 第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...

  6. 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...

  7. js邮箱自动补全

    邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  9. javascript 实现类似百度联想输入,自动补全功能

    js  实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" //点击页面隐藏自动补全提示框 document.onclick = functi ...

随机推荐

  1. 多线程——newFixedThreadPool线程池

    newFixedThreadPool线程池: 理解: 1.固定线程数的线程池. 2.通过Executors中的静态方法创建:     public static ExecutorService new ...

  2. Scala常用变量生命周期

    val words = *** //在words被定义时取值 lazy val words = *** //在words被首次使用时取值 def words = *** //在每一次words被使用时 ...

  3. DLNg改善深层NN:第一周DL的实用层面

    1.为什么正则化可以减少过拟合? //答:可以让模型参数变小,减小模型的方差. 在损失函数中加入正则项,在正则化时,如果参数lamda设置得足够大,那么就相当于权重系数W接近于0 ,就会减少很多隐藏单 ...

  4. AWS EC2 Root密码重置

  5. Python字典和集合的内部实现

    1. 哈希表(Hash tables) 在Python中,字典是通过哈希表实现的.也就是说,字典是一个数组,而数组的索引是经过哈希函数处理后得到的.哈希函数的目的是使键均匀地分布在数组中.由于不同的键 ...

  6. RNN/LSTM/GRU/seq2seq公式推导

    概括:RNN 适用于处理序列数据用于预测,但却受到短时记忆的制约.LSTM 和 GRU 采用门结构来克服短时记忆的影响.门结构可以调节流经序列链的信息流.LSTM 和 GRU 被广泛地应用到语音识别. ...

  7. Hibernate框架第一天

    **框架和CRM项目的整体介绍** 1. 什么是CRM * CRM(Customer Relationship Management)客户关系管理,是利用相应的信息技术以及互联网技术来协调企业与顾客间 ...

  8. 《A Structured Self-Attentive Sentence Embedding》(注意力机制)

    Background and Motivation: 现有的处理文本的常规流程第一步就是:Word embedding.也有一些 embedding 的方法是考虑了 phrase 和 sentence ...

  9. Eclipse修改编码方式

    1.修改工作空间默认编码 1.修改工作空间默认编码:window -> preferences ->  General -> Workspace 2.修改文件的编码 在Eclipse ...

  10. Unknown Treasure (卢卡斯 + 孙子定理, 模板题)

    Unknown Treasure 参考链接 : https://www.cnblogs.com/linyujun/p/5199684.html 卢卡斯定理 : C(n, m) % p  =  C(n ...