aotocomplete.js

http://blog.csdn.net/smeyou/article/details/7980273?_t_t_t=0.3565731019350138

$(function() {
//alert(goodObj)
//alert(emails)
$('#typeNum').autocomplete(goodObj, {
max: 1000, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度,溢出隐藏
scrollHeight: 200, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
mustMatch:true,
formatItem: function(row, i, max) {
return i + '/' + max + ':"' + row.typeNum + '"[' + row.serialNum + ']'+"库存:"+'"[' + row.repertory + ']';
},
formatMatch: function(row, i, max) {
return row.typeNum +"/"+ row.serialNum;
},
formatResult: function(row) {
return row.typeNum +"/"+ row.serialNum;
}
}).result(function(event, row, formatted) {
if(row) { //alert(row.serialNum);
//$(this).val(row.typeNum+" "+row.serialNum);
//alert(row.id)
}
//tr.find("input[name=id]").val(data[0]); //不加此判断会报错:data[0]为null
});
});
 var emails = [
{ name: "Peter Pan", to: "gggsa@pan.de",id:1 },
{ name: "Molly", to: "molly@yahoo.com",id:"2" },
{ name: "Forneria Marconi", to: "live@japan.jp",id:3 },
{ name: "Master <em>Sync</em>", to: "205bw@samsung.com",id:4 },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com",id:5 },
{ name: "Don Corleone", to: "don@vegas.com",id:6 },
{ name: "Mc Chick", to: "info@donalds.org",id:"7" },
{ name: "Donnie Darko", to: "dd@timeshift.info",id:8 },
{ name: "Quake The Net", to: "webmaster@quakenet.org",id:9 },
{ name: "Dr. Write", to: "write@writable.com",id:10 },
{ name: "GG Bond", to: "Bond@qq.com",id:11 },
{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com",id:12 }
]; $(function() {
$('#keyword').autocomplete(emails, {
max: 10, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function(row, i, max) {
return i + '/' + max + ':"' + row.name + '"[' + row.to + ']'+'"[' + row.id + ']';
},
formatMatch: function(row, i, max) {
return row.name + row.to;
},
formatResult: function(row) {
return row.to;
}
}).result(function(event, row, formatted) {
alert(row.to);
});
});
 var emails = [
{ name: "Peter Pan", to: "gggsa@pan.de",id:1 },
{ name: "Molly", to: "molly@yahoo.com",id:"2" },
{ name: "Forneria Marconi", to: "live@japan.jp",id:3 },
{ name: "Master <em>Sync</em>", to: "205bw@samsung.com",id:4 },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com",id:5 },
{ name: "Don Corleone", to: "don@vegas.com",id:6 },
{ name: "Mc Chick", to: "info@donalds.org",id:"7" },
{ name: "Donnie Darko", to: "dd@timeshift.info",id:8 },
{ name: "Quake The Net", to: "webmaster@quakenet.org",id:9 },
{ name: "Dr. Write", to: "write@writable.com",id:10 },
{ name: "GG Bond", to: "Bond@qq.com",id:11 },
{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com",id:12 }
]; $(function() {
$('#keyword').autocomplete(emails, {
max: 10, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function(row, i, max) {
return i + '/' + max + ':"' + row.name + '"[' + row.to + ']'+'"[' + row.id + ']';
},
formatMatch: function(row, i, max) {
return row.name + row.to;
},
formatResult: function(row) {
return row.to;
}
}).result(function(event, row, formatted) {
alert(row.to);
});
});

jquery插件:aotocomplete的更多相关文章

  1. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  2. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  3. BootStrap_04之jQuery插件(导航、轮播)、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  4. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  5. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  6. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  9. jquery插件扩展的学习

    jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...

  10. Jquery 插件\Js 插件收集

    1.linq.js 使得js 的数组像c#的linq操作一下样 http://linqjs.codeplex.com/ 2.分页插件 https://github.com/mricle/Mricode ...

随机推荐

  1. 不错的usb分析工具!!!---用bus hound分析usb的枚举过程【转】

    转自:http://blog.chinaunix.net/uid-25909619-id-3335199.html 说明:由于分析时是在记事本上分析的,贴到这里出现了格式有点乱,看时请复制到记事本中, ...

  2. (十一)Ubuntu下面怎么找到一个软件安装的目录,卸载软件

    aptitude show packagename 实例: aptitude show sublime-text-installer 可以看到这个软件一系列信息 dpkg命令 dpkg -l //列车 ...

  3. python中函数和生成器的运行原理

    #!/usr/bin/env python # -*- coding:utf-8 -*- # author:love_cat # python的函数是如何工作的 # 比方说我们定义了两个函数 def ...

  4. Segment Tree

    姑且叫这种数据结构这个名字 #include<iostream> #include<cstdio> #define N 200005 #define Lson ret<& ...

  5. 【linux高级程序设计】(第十一章)System V进程间通信 4

    共享内存 共享内存主要用于实现进程间大量数据传输. 共享内存的数据结构定义: 系统对共享内存的限制: 共享内存与管道的对比: 可以看到,共享内存的优势: 1.共享内存只需复制2次,而管道需要4次 2. ...

  6. hihocoder1236(2015长春网赛J题) Scores(bitset && 分块)

    题意:给你50000个五维点(a1,a2,a3,a4,a5),50000个询问(q1,q2,q3,q4,q5),问已知点里有多少个点(x1,x2,x3,x4,x5)满足(xi<=qi,i=1,2 ...

  7. Appium+python自动化22-Appium Desktop【转载】

    Appium Desktop 原滋原味的官方文档 Appium Desktop是一款用于Mac.Windows和Linux的开源应用,它提供了Appium自动化服务器在一个漂亮灵活的UI中的强大功能. ...

  8. postman的使用(转载)

    Postman介绍 Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件.其主要功能包括: 模拟各种HTTP requests 从常用的 ...

  9. EntityFramework之多对多关系(四)

    上篇介绍了一对多关系,下面介绍下多对多关系代码编写. 1.新建model实体,User是用户类,Role是角色类,由于是多对多关系,必须得有一个中间类,所以产生了UserRole类 public cl ...

  10. Java IO 学习(五)跟踪三个文件IO方法的调用链

    假设我们想要用Java读取一个二进制文件,有好几种方式,本文会选取其中比较典型的三种方式进行详细分析 0. 准备工作 安装openjdk-1.8.0.141(普通的jdk中涉及IO的很多代码是闭源的, ...