[心缘地方]同学录
首页 | 功能说明 | 站长通知 | 最近更新 | 编码查看转换 | 代码下载 | 常见问题及讨论 | 《深入解析ASP核心技术》 | 王小鸭自动发工资条VBA版
登录系统:用户名: 密码: 如果要讨论问题,请先注册。

[备忘]Jquery UI的自动完成功能,autocomplete

上一篇:[备忘]HTML实体 entity 转义字符的写法
下一篇:[备忘]POI生成Excel,Itext生成PDF时,页面横版的设置方法。

添加日期:2014/8/27 16:56:31 快速返回   返回列表 阅读2574次
演示地址:
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.

添加评论 Add new comment.
昵称 Name:
评论内容 Comment:
验证码(不区分大小写)
Validation Code:
(not case sensitive)
看不清?点这里换一张!(Change it here!)
 
评论由管理员查看后才能显示。the comment will be showed after it is checked by admin.
CopyRight © 心缘地方 2005-2999. All Rights Reserved