jquery autocomplete demo
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。
- jquery.autocomplete参考地址
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
http://docs.jquery.com/Plugins/Autocomplete - jquery.autocomplete源码
<html> <head> <title>jquery autocomplete demo</title> <meta http-equiv="content-type" content="text/html; charset=gbk" /> <script src="<%=path%>/auto/jquery-1.7.1.min.js"></script> <script src="<%=path%>/auto/jquery.autocomplete.js"></script> <link rel="stylesheet" href="<%=path%>/auto/jquery.autocomplete.css" /> <script type='text/javascript'> //可改成ajax变成动态数据 var address = [ { name: "西安", to: "xian" }, { name: "北京", to: "beijing" }, { name: "西宁", to: "xining" }, { name: "西藏", to: "xizang" }, { name: "天津", to: "tianjin" }, ]; $(function(){ $('#keyword').autocomplete(address, { max: 12, //列表里的条目数 minChars: 1, //自动完成激活之前填入的最小字符 width: 200, //提示的宽度,溢出隐藏 scrollHeight: 300, //提示的高度,溢出显示滚动条 matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示 autoFill: false, //自动填充 formatItem: function(row, i, max) { return row.name; },formatMatch: function(row, i, max) { return row.name + row.to; },formatResult: function(row) { return row.to; } }); }); </script> </head> <body> <h1>jquery autocomplete demo</h1> <h1> <input type="text" id="keyword" style="width: 200px;"/> </h1> </body> </html>
相关推荐
gufudhn 2020-06-12
yaohustiAC 2019-12-27
pythonclass 2019-11-07
geminihr 2015-03-19
仲崇峰 2015-06-02
83453065 2015-07-22
hubowei 2015-07-22
原為簡單 2017-02-21
87433764 2017-02-21
89453862 2017-09-16
delmarks 2017-02-21
yesbuy00 2017-02-08
85403969 2016-10-25
gamecalo 2016-10-08
Web全栈笔记 2016-10-08
Kindlecode 2016-05-25
limengmeng00 2015-07-22