jQueryAutocomplete使用，支援輸入中英文模糊比對

近期項目中有個需求：支援text文本框輸入模糊比對查詢，找了下資料，jQuery有個插件jQuery.autocomplete，可以滿足需求，故研究了下，記錄下來。

項目中試用的前端語言是velocity,以及bui，autocomplete插件頁面部分很簡單，一個div包含兩個文本框，text和hidden類型即可。

 頁面代碼如下：

    <div id="phNationalitySg1">

<input name="$group.phNationality1.key" type="text" data-rules="{required:true}" maxlength="100"  value="$group.phNationality1.value" id="phNationality1">

<input name="$group.phNationality.key" type="hidden" data-rules="{required:true}" maxlength="100"  value="$group.phNationality.value" id="phNationality"> 

</div>

js代碼部分：

        //支援輸入查詢的下拉框，inputElement即type='text'的輸入框，realElement即type="hidden"的輸入框。

function fuzzyQuery(inputElement,realElement){

var spanWidth = $(inputElement).width() + 10;

if(countryNameArr!= null){

$(inputElement).autocomplete(

countryNameArr,

{

minChars : 0,

//max : 20,

autoFill : false,

mustMatch : false,

matchContains : true,

scrollHeight : 220,

width : spanWidth,

multiple : false,

formatItem : function(row, i, max) { //顯示格式

return "<span style='width:"+spanWidth+"px;'>"

+ row.text + "</span>";

},

formatMatch : function(row, i, max) { //以什麼資料作為搜尋關鍵詞,可包括中文,

return row.text;

},

formatResult : function(row) { //傳回結果

return row.text;

}

}).result(function(event, data, formatted){

$(realElement).val(data.text);

});

}

}

調用方法：

  //國籍資訊，支援模糊查詢

$('#phNationality1').on('click',function(){

fuzzyQuery('#phNationality1', 'phNationality');

});

$('#phNationality1').on('change',function(){

var text = $('#phNationality1').val();

if(text){

$('#phNationalityCode').val(countryCodeArr[BUI.Array.indexOf(text, countryNameArr)]);

$('#phNationalityEN').val(countryCodeArr[BUI.Array.indexOf(text, countryNameArr)]);

}

});              

注：change事件主要是為了在選擇的值改變時，對想要指派的表單屬性進行動态給值，也可以不加。