JQuery 的Autocomplete插件 result

工作当中用到了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

时间: 2024-10-22 16:32:58

JQuery 的Autocomplete插件 result的相关文章

jQuery的Autocomplete插件的远程url取json数据的问题

关于远程返回的json数据的展示,以前一样的代码,如果是本地写好的json串数据,插件显示就没有问题,一旦换成ulr方式读取一样的数据,插件就不能正常显示问题了. 今天偶然搜索资料找到一篇csdn上有人提问的问题,也是相同的问题 http://topic.csdn.net/u/20090703/14/8d349262-8ca1-4bf5-998d-3a0712412149.html 有高人解答了 $("#autocomplete").autocomplete("data.as

Jquery autocomplete插件的使用

简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></ti

jquery.autocomplete 插件扩展滚动条加载更多

项目中用到autocomplete插件,但是插件的原有功能,不能满足项目全部需求所以修改了增加了以下几点功能: 1 粘贴文本自动加载数据 2 滚动条滚动到底部加载更多数据 3 与页面插件联动更新数据(清除缓存) 4 增加插件赋值给一个隐藏域,就可以得到文本和值 (做asp.net的用起来比较方便) 如果要启用滚动条加载更多数据 配置参数时加上 scroll:true, pagingMore:true 在加载更多时请求的url参数会有一个page的参数 它标识当前请求的是第几页数据 ps(这个分页

基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

jquery的各种插件调用(有些已经过时,以备注,其他的一些可以闲的时候用作拆解)

jquery的valiteDate验证插件应用 <!DOCTYPE html> <html> < head> < meta charset= "UTF-8"> < title></title > < script src= "js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"

基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

MVC下autocomplete插件的使用

Autocomplete插件的功能类似于Google Suggest 功能,可以在用户输入查询条件的时候,自动提示用户若干词条,方便用户快速查询.下面我们介绍下autocomplete插件如何在MVC下面使用. 首先,需要下载autocomplete插件,其下载地址是:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 其次,需要在页面上引入两个文件(jquery文件除外),分别是jquery.autocomplete

类似baidu搜索 修正jquery的autocomplete在firefox下不支持中文输入法的bug

解决方法: 转自 =============================================================== http://blog.csdn.net/happymagic/article/details/8775123 =============================================================== jQuery.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomp

jQuery框架-3.jQuery自定义封装插件和第三方插件

一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend   Merge the contents of two or more objects together into the first object.把两个或者多个对象合并到第一个对象当中: jQuery.fn.extend   Merge the contents of an object onto the jQue