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事件主要是为了在选择的值改变时，对想要赋值的表单属性进行动态给值，也可以不加。