JQuery 的Autocomplete插件使用

2023-09-24 14:46•杂谈•阅读 4077

工作当中用到了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应用就完成了

JQuery 的Autocomplete插件 使用