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 ...
随机推荐
- [django]drf知识点梳理-权限
用户 - 权限 - 资源 (拥有) (绑定) django权限机制能够约束用户行为,控制页面的显示内容,也能使API更加安全和灵活:用好权限机制,能让系统更加强大和健壮 django权限控制 Djan ...
- 【Java】-NO.16.EBook.4.Java.1.008-【疯狂Java讲义第3版 李刚】- 集合/容器
1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.008-[疯狂Java讲义第3版 李刚]- 集合 Style:EBook Series:Java Si ...
- 【LeetCode每天一题】Add Two Numbers(两链表相加)
You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...
- 用iframe嵌入了一个微信公众号平台文章的URL
JS: $.ajaxPrefilter( function (options) { if (options.crossDomain && jQuery.support.cors) { ...
- Boolean数据类型
boolean 数据类型 boolean 变量存储为 8位(1 个字节)的数值形式,但只能是 True 或是 False,可以把它看做是一个和1代替,并且一定要小写.boolean operate是指 ...
- 海量数据找相同数,高配词,不重复的数,判断一个数是否存在,查询串,不同电话号码的个数,中位数,按照query频度排序,topk
这类题目,首先需要确定可用内存的大小,然后确定数据的大小,由这两个参数就可以确定hash函数应该怎么设置才能保证每个文件的大小都不超过内存的大小,从而可以保证每个小的文件都能被一次性加载到内存中. 1 ...
- linux 标准输入输出 重定向
背景: 屏幕打印不一定都是从标准输出来的,也包括标准错误输出流stderr中的信息 文件描述符定义(系统定义了12个) 0 标准输入 1 标准输出 2 标准错误 0 默认键盘输入 1,2默认从屏幕 ...
- iOS 开发笔记-加载/初始化
ViewDidLoad 一般我们会在这里做界面上的初始化操作,比如往view中添加一些子视图.从数据库或者网络加载模型数据装配到子视图中 在自定义控制里 initWithFrame:一般用于添加控件, ...
- node.js初识06
node中的fs文件系统 var http = require("http"); var fs = require("fs"); var server = ht ...
- 通过Referer设置来防盗链
在Servlet中需要设置防盗链功能时可以通过以下代码: String referer = request.getHeader("Referer"); if(referer == ...