jquery 自动补全插件是属于jqueryUI子插件,引用时可以单独下载autocomplete.js,也可以下载jqueryUI.js,一开始我引用的是autocomplete.js,但使用时发现报了好多插件的错误,网上百度了一下,别人也没报这个错,下了几个autocomplete的js,都有问题,后来问了群里一个朋友,他引的是jqueryUI.js,后来就用了这个
第一步:引入JS,css
第二步:调用js,getShopName()放在初始化的js中,用于获取数据源
后台返回json格式数据:label用于显示在自动补全框的,values用于实际要传到后台的值,这个值比如是id,注:这里的values不能为value,你可以改为其他名字也可以,但不能用value,因为value在autocomplete插件中被使用了,被认为是实际的值,比如下拉列表是汉字,你选择了一项,出现在输入框的变成了id,这个明显不符合项目需要,正确的应该是下拉列表是汉字,显示在输入框的也是汉字,但实际传到后台的值应该是你的hidden输入框的,所以上面那张图片有一个select: function(e, ui) {
$("#shopName").val(ui.item.values);
}
这样的处理,把选择的实际id赋给一个隐藏的input框,标红的values应该与后台传的json一致
最后再上传一张效果图:
其实这个插件还是有一个bug没解决的,网上百度好多都可以限制下拉框的高度,这里设置了老是不起作用,但勉强也能用