废话不多说，先看效果！~

需要引入的资源如下

<linkrel="stylesheet"href="/css/jquery.autocomplete.css"type="text/css"><scripttype="text/javascript"src="/lib/jquery.min.js"></script><!--1.8.3--><scripttype="text/javascript"src="/js/jquery.autocomplete.js"></script>

前端代码

<divclass="control-groupspan6"><labelclass="control-label">客户名</label><divclass="controls"><inputtype="text"id="q-customerName"name="customerName"class="form_valueac_input"autocomplete="off"><inputtype="hidden"id="q-customerId"name="customerId"class="form_value"validate="n"value="0"><!--默认值为0--></div></div>

Javascipt代码

$("#q-customerName").autocomplete("/CustomerName/getCustomerNameSuggestion.do",{max:10,//最多5条记录minChars:1,scrollHeight:250,width:206,dataType:'json',//返回的数据类型为JSON类型extraParams:{"customerName":function(){returnencodeURIComponent($("#q-customerName").val());}},parse:function(data){//解释返回的数据，把其存在数组里varparsed=[];for(vari=0;i<data.length;i++){parsed[parsed.length]={data:data[i],key:data[i].key,value:data[i].value,result:data[i].value//返回的结果显示内容};}if(data.length==0){parsed.push({data:{"key":"0","value":"无搜索结果"},key:"0",result:"无搜索结果"});}returnparsed;},formatItem:function(item){//显示下拉列表的内容returnitem.value;},formatMatch:function(item){returnitem.value;},formatResult:function(item){returnitem.value;}}).result(function(event,item,formatted){//把返回的结果内容显示在其他文本框上$("#q-customerId").val(item.key);if(item.key==0){$("#q-customerName").val("");}});

后端返回的json数据格式如下

[{"key":"5133","value":"上海**有限公司"},{"key":"5197","value":"上海**用品有限公司"},{"key":"5202","value":"上海**传播有限公司"},{"key":"5234","value":"上海**用品有限公司"},{"key":"5319","value":"上海**用品有限公司"},{"key":"5402","value":"上海**用品有限公司"},{"key":"5500","value":"上海**有限公司"},{"key":"5581","value":"上海**用品有限公司"}]

Firefox下有个小bug，使用搜狗输入法输入中文时不触发antocomplete事件。正在解决。

测试发现JQuery1.9及以上不兼容，项目中使用的是1.8.3


这东西没啥技术含量，就是麻烦，记录一下避免以后在同样的问题上浪费时间。