| [备忘]Jquery UI的自动完成功能，autocomplete | ||
上一篇:[备忘]HTML实体 entity 转义字符的写法 |
||
| 添加日期：2014/8/27 16:56:31 | 快速返回 返回列表 | 阅读2579次 |
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里一句没提。 |
||
| 评论 COMMENTS | |
| 没有评论 No Comments. |
