jQuery 的Autocomplete（自動完成、自動填充）插件有不少，但比較下來我感覺，還是bassistance.de 的比較強大，我們就來寫一些代碼感受一下。
最簡單的Autocomplete（自動完成）代碼片段
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript">
var websites = [
"Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
"Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
];
$().ready(function() {
$("#website").autocomplete(websites);
});
</script> |
1 2 3 4 5 6 |
<p> <label>Web Site:</label> <input type="text" id="website" /> <input type="button" id="getvalue" value="Get Value" /> </p> <div id="content"></div> |
我們可以看到效果
這么幾行代碼就完成了自動完成功能，真實太強了，不過bassistance.de的jQuery Autocomplete插件還有更豐富的功能，它的文檔在http://docs.jquery.com/Plugins/Autocomplete ，在API Documentation里，我們要仔細的研究一下autocomplete( url or data, [options] )方法。
autocomplete方法有兩個參數，第一個用來填寫URL地址或是數據，jQuery Autocomplete插件是支持Ajax方式調用數據，所以可以填寫調用的地址，另外可以直接填寫數據，格式為JavaScript數組，如我們的例子，autocomplete的另外一個參數 [options]是一個可選項，我們在例子中就沒有寫，但這個參數里面卻有很多可配置的參數，我們還是先修改上面的例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$().ready(function() {
$("#website").autocomplete(websites,{
minChars: 0,
max: 5,
autoFill: true,
mustMatch: true,
matchContains: true,
scrollHeight: 220,
formatItem: function(data, i, total) {
return "<I>"+data[0]+"</I>";
},
formatMatch: function(data, i, total) {
return data[0];
},
formatResult: function(data) {
return data[0];
}
});
}); |
在options項我們增加了好幾個參數
minChars表示在自動完成激活之前填入的最小字符，這里我們設置為0，在我們雙擊文本框，不輸入字符的時候，就會把數據顯示出來，效果如下
max表示列表里的條目數，我們設置了5，所以顯示5條，也如上圖
autoFill表示自動填充，就是在文本框中自動填充符合條件的項目，看下圖，在我們輸入“g”的時候，文本框里填充了“google”
mustMatch表示必須匹配條目，也就是在文本框里輸入的內容，必須是data參數里的數據，如果不匹配，文本框就被清空
matchContains表示包含匹配，就是data參數里的數據，是否只要包含文本框里的數據就顯示，比如在上面的圖中，我們輸入了“g”，由於“Sogou”中也包含一個“g”，所以會顯示出來，如果將matchContains設為fasle，則“Sogou”就不會顯示
scrollHeight不用多解釋，看文檔就知道。
后面3個參數formatItem、formatMatch、formatResult非常有用，formatItem作用在於可以格式化列表中的條目，比如我們加了“I”，讓列表里的字顯示出了斜體，formatMatch是配合formatItem使用，作用在於，由於使用了formatItem，所以條目中的內容有所改變，而我們要匹配的是原始的數據，所以用formatMatch做一個調整，使之匹配原始數據，formatResult是定義最終返回的數據，比如我們還是要返回原始數據，而不是formatItem過的數據。
[options]里還有很多有用的參數，大家可以看它的文檔。
jQuery Autocomplete插件里還有兩個重要的方法，一個是result( handler )，一個是search( )，比如用戶在選定了某個條目時需要觸發一些別的方法時，着兩個方法就可以起作用了，我們再修改以上的例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$().ready(function() {
function findValueCallback(event, data, formatted) {
$("#content").html("<strong>"+(!data ? "No match!" : "Selected: " + formatted)+"</strong>");
}
$("#website").autocomplete(websites,{
minChars: 0,
max: 5,
autoFill: true,
mustMatch: true,
matchContains: true,
scrollHeight: 220,
formatItem: function(data, i, total) {
return "<I>"+data[0]+"</I>";
},
formatMatch: function(data, i, total) {
return data[0];
},
formatResult: function(data) {
return data[0];
}
});
$("#website").result(findValueCallback);
$("#getvalue").click(function() {$("#website").search()});
}); |
看看是什么效果，會在content div的地方顯示出我們選擇的內容。
jQuery Autocomplete插件所帶的例子還是很好的，大家可以仔細研究一下它的例子，更加靈活的運用jQuery Autocomplete插件。
PS:附加一點界面上的模糊搜索功能：
// 模糊搜索
$("#blurQueryCond_value").keyup(function() {
$("#cacheInstanceList_body tr").hide();
var $d = $("#cacheInstanceList_body tr").filter(":contains('" + $.trim($("#blurQueryCond_value").val()) + "')");
$d.show();
}
);