Jquery實現自動補全功能
阿新 • • 發佈：2019-01-28
今天因為公司全去搞活動了，所以在網上看了一會兒jquery，在這裡詳細介紹一下基於jquery的autoComplete的實現。 首先，向大家看下自己實現的最簡單的結果：  估計和很多新手一樣，一開始沒有明白怎麼弄，不過不要緊張，慢慢來，so easy! 第一:去下載一個jquery.autocomplete.js外掛：[官網地址](http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/) 第二:開始寫一個.html;  在body裡面只要一個輸入框即可:
<body>
<input type="text" id="singleBirdRemote" style="width: 200px;height: 30px;"/>
</body>接下來就是全部是jquery了。
直接附上程式碼，裡面有詳細的解釋，直接copy即可使用。
var websites = [
"Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
"Taobao", "Tom", "Yahoo", "JavaEye", "Csdn" 這樣開啟你的頁面就可以了。是不是很簡單？但是這樣還不是我們想要的結果，因為都是死資料。我們需要的是從資料庫裡面取到資料直接放到頁面上。其實這個也是很簡單滴。
現在我們的model已經有了，萬事俱備，只欠data。現在我們就用ajax來獲取資料，想必很多小夥伴已經有思路了。嘿嘿，請看：
function initAutoComplete(json){
$("#tel").autocomplete(json , {
minChars:1,
width:260,
dataType:"json",
matchContains: true,
formatItem: function(row, i, max) {
return row.tel + " <" + row.name + "> ["+row.cg_name+"]";
},
formatMatch: function(row, i, max) {
return row.tel;
},
formatResult: function(row) {
return row.tel;
}
});
}
$(document).ready(function(){
$("#tel").focus(function(){
$.post(url,{},function(data){
initAutoComplete(data);
},"json");
});
}); 以上程式碼就是實現ajax從伺服器取資料的模型了。好了，就這樣吧，要回家嘍。