码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 的Autocomplete插件 result

时间:2014-05-19 09:28:24      阅读:449      评论:0      收藏:0      [点我收藏+]

标签:blog   c   http   a   com   数据   

工作当中用到了JQuery 的Autocomplete插件,但是遇到的是非常规使用的问题。

其一是下拉菜单的显示和填入文本框的结果要求的字符串不一样,即显示用户名,所属部门,但是填入文本框里的是用户名和电话号码

其二是在用户Select过后,需要触发事件,把用户的ID传到另一个隐藏的文本框中

首先咱比较懒,于是在网上google了一下技术方案,发现都比较复杂。出于想偷懒的目的,研究了Autocomplete的在线DOC以后,发现有很简单的解决方案

首先是应用Autocomplete的formatItem和formatResult函数

返回数据集,懒人有懒办法,就用字符串加逗号分隔来表示,一行一个结果:

"NAME1,DEPARTMENT1,TEL1,ID1/r/n NAME2, DEPARTMENT2,TEL2,ID2"

formatItem: 下拉菜单数据显示的定制,这里只显示用户名和部门

formatItem: function(data, i, n) {

      var array = data.toString().split(‘,‘) ;
      return array[0] + ‘/‘ + array[1] ;

  }
formatResult: 填入文本框的结果,这里填入用户名和电话号码formatItem: function(data, i, n) {

       var array = data.toString().split(‘,‘);
        return array[0] + ‘, ‘ + array[2];

 }

最后是回调函数,要把用户ID存到一个隐藏文本框中,对此Autocomplete提供了一个子函数.result(),用来在选择结果后回调其他的函数
继续使用万能的split函数来把结果字符串拆分

$(‘inputfield‘).autocomplete(url, {options}).result
(function(event, data, formatted) {
         var array = data.toString().split(‘,‘);
         $("hiddenfield").val(array[3]);

});
由此懒人的Autocomplete应用就完成了


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/batman9956/archive/2010/08/17/5816997.aspx

JQuery 的Autocomplete插件 result,布布扣,bubuko.com

JQuery 的Autocomplete插件 result

标签:blog   c   http   a   com   数据   

原文地址:http://www.cnblogs.com/abinlove/p/3731978.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!