懒人活用JQuery.Autocomplete实现Select触发事件和结果定制
来源:互联网 发布:酒店预定网站源码 编辑:程序博客网 时间:2024/06/06 03:56
工作当中用到了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: 填入文本框的结果,这里填入用户名和电话号码
formatResult: 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实现Select触发事件和结果定制
- 懒人活用JQuery.Autocomplete实现Select触发事件和结果定制
- JQuery autocomplete选中某项后触发事件
- jQuery实现select下拉框选中数据触发事件
- 事件触发机制:Poll,Select和Epoll实现原理分析
- jquery触发select的change事件失效
- jquery实现回车键触发事件
- jquery实现回车键触发事件
- jquery实现回车键触发事件
- jquery开发:jquery实现回车键触发事件
- jQuery事件触发和js手动触发事件
- jquery实现按回车触发事件
- jquery 自动调用和触发某个事件
- jQuery触发事件中的this和target
- JQuery 自动触发事件trigger和triggerHandler
- jQuery AutoComplete实现
- Django & JQuery 实现 Autocomplete
- Django & JQuery 实现 Autocomplete
- Amd+Vmware+Mac Os X10.6 虚拟机安装苹果操作系统时一些注意事项
- Your Freedom — 跨平台的代理软件
- ubuntu 下源代码编译安装
- asd sa dsa dsa
- 开篇
- 懒人活用JQuery.Autocomplete实现Select触发事件和结果定制
- 图像
- 文件系统中刷数据的实现
- Java面试的问题
- Ubuntu WEB服务器问题
- LAMP 安装步骤
- 百度确认9月初推电脑管家:含杀毒下载功能(转)
- 新手福音。Xperia™ X1卡刷详细图文教程↗
- poj2421解题报告