jquery autocomplete demo
生活随笔
收集整理的這篇文章主要介紹了
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>
總結
以上是生活随笔為你收集整理的jquery autocomplete demo的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java集合中对象某属性比较排序
- 下一篇: JAVA如何实现发送短信