演示地址: http://jqueryui.com/autocomplete/
文档API地址: http://api.jqueryui.com/autocomplete/
我的代码,供参考
<link rel="stylesheet" href="${baseURL}/js/jquery-ui-1.11.0.css"> <script src="${baseURL}/js/jquery-ui-1.11.0.js"></script> <script> $(function() { $( "#standCode" ).autocomplete({ source: "${baseURL}/stand/standAutoFill", minLength: 2, delay:200, maxItemsToShow:50, width:300, autoFocus: true, select: function( event, ui ) { var label = ui.item.label; var index = label.indexOf(" ",label.indexOf(" ")+1); $("#standName").val(label.substr(index)); } }); }); </script>
------------------- 重点,你在输入框输入东西后,会自动访问你的url, 如http://example.com?term=foo term是参数名,固定的 foo是你输入的值 后台用term接收参数,做个like查询,返回json数据即可。 ----------------------------- json的格式可以是[ "Choice1", "Choice2" ],就是一个一个字符串,供选择。 或者[ { label: "Choice1", value: "value1" }, ... ] 属性名就是label,value,比如供选择时显示code和名字,选择后只输入code,就用这种格式即可。 ------------------------- minLength是说最少输入几个字符才响应。 autoFocus为true,是自动选择第一个项目,然后可以鼠标上下移动选择。 select事件,是选择一个项目时的动作,默认是把选择的哪项的value复制到输入框中。
我这里又把label里的名字拆出来,放到名字的输入框中了。 ------------------------------
会了不难,第一次搞了两个小时~~关键是不知道后台返回的json格式, 看了半天文档才清楚,它的演示demo里一句没提。
|