- 浏览: 176106 次
- 性别:
- 来自: 广州
文章分类
最新评论
使用jquery的autocomplete插件~~,目前网上有新版,这个使用的之前的版本,因为是在项目里的~~,具体需要使用到的js和css也作为附件上传~
<html>
<head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script type='text/javascript' src='./jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="./jquery.autocomplete.css" />
<script>
var emails = [
{ name: "Peter Pan", to: "peter@pan.de" },
{ name: "Molly", to: "molly@yahoo.com" },
{ name: "Forneria Marconi", to: "live@japan.jp" },
{ name: "Master Sync", to: "205bw@samsung.com" },
{ name: "Dr. Tech de Log", to: "g15@logitech.com" },
{ name: "Don Corleone", to: "don@vegas.com" },
{ name: "Mc Chick", to: "info@donalds.org" },
{ name: "Donnie Darko", to: "dd@timeshift.info" },
{ name: "Quake The Net", to: "webmaster@quakenet.org" },
{ name: "Dr. Write", to: "write@writable.com" }
];
var course = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl", "javascript1", "javascript2", "javascript3", "javascript4", "javascript5", "javas111111111111111cript6", "javascript7", "javascript8", "javascript9", "javascript10", "javascript11"];
var names = [
{qpName : "zhangsan", jpName : "zs", name : "张三"},
{qpName : "lisi", jpName : "ls", name : "李四"},
{qpName : "wangwu", jpName : "ww", name : "王五"},
{qpName : "maliu", jpName : "ml", name : "马六"},
{qpName : "liuqi", jpName : "lq", name : "刘七"},
{qpName : "linba", jpName : "lb", name : "林八"},
{qpName : "fujiu", jpName : "fj", name : "傅九"},
{qpName : "dengling", jpName : "dl", name : "邓零"},
{qpName : "zhaoyi", jpName : "zy", name : "赵一"},
{qpName : "huanger", jpName : "he", name : "黄二"}
];
$(function(){
//普通测试
$("#suggest1").autocomplete(course);
//方法测试
$("#emailsAuto").autocomplete(emails, {
width:400,
minChars:1,
max:50,
delay:500,
//autoFill:true,
mustMatch:false,
matchContains:true,
selectFirst:false,
cacheLength:1,
matchSubset:true,
matchCase:false,
multiple:false,
multipleSeparator:",",
scroll:true,
scrollHeight:5,
formatItem:function(row, i, max){
return row.name + "【"+ row.to +"】" + i + " -- " + max;
},
formatResult:function(row, i, max){
return row.to;
},
formatMatch:function(row, i, max){
return row.to;
}
//extraParams:{},
}).result(function(event, data, formatted) {
//如选择后给其他控件赋值,触发别的事件等等
//$("#emailsAuto").val("123123");
}
);
/*
$("#emailsAuto").autocomplete(emails, {
width: 400px, //指定下拉框的宽度. Default: input元素的宽度,超过将隐藏
minChars:0, //在触发autoComplete前用户至少需要输入的字符数.Default: 1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表
max:3, //autoComplete下拉显示项目的个数.Default: 10
delay:5000, //击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
autoFill: true, //要不要在用户选择时自动将第一个值填入到input框. Default: false
mustMatch:false, //如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false,并且输入框的内容会被清掉
matchContains:false, //决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false, 相当于全模糊
selectFirst:false, //如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true
cacheLength:1, //缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
matchSubset:true, //autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true
matchCase:false, //比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false
multiple:false, //是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
multipleSeparator:",", //如果是多选时,用来分开各个选择的字符. Default: ","
scroll:true, //当结果集大于默认高度时是否使用卷轴显示 Default: true
scrollHeight:100, //自动完成提示的卷轴高度用像素大小表示 Default: 180
formatItem:none, //为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
formatResult:none, //和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
formatMatch:none, //对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
extraParams:{}, //为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.aspx?q=foo&bar=4 (假设当前用户输入了foo). Default: {}
}).result(function(event, data, formatted) {
//如选择后给其他控件赋值,触发别的事件等等
}
);
*/
//显示、值、匹配测试
$("#staff").autocomplete(names, {
width:300,
matchContains:true,
scroll:true,
scrollHeight:100,
formatItem:function(row, i, max){
return row.name;
},
formatResult:function(row, i, max){
return row.name;
},
formatMatch:function(row, i, max){
return row.qpName + row.jpName + row.name;
}
});
});
</script>
</head>
<body>
<label>Single City (local):</label>
course: <input type="text" id="suggest1" /><br/>
emails: <input type="text" id="emailsAuto" style="width:400px;" /><br/>
names: <input type="text" id="staff" style="width:300px;" /><br/>
</body>
</html>
<html>
<head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script type='text/javascript' src='./jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="./jquery.autocomplete.css" />
<script>
var emails = [
{ name: "Peter Pan", to: "peter@pan.de" },
{ name: "Molly", to: "molly@yahoo.com" },
{ name: "Forneria Marconi", to: "live@japan.jp" },
{ name: "Master Sync", to: "205bw@samsung.com" },
{ name: "Dr. Tech de Log", to: "g15@logitech.com" },
{ name: "Don Corleone", to: "don@vegas.com" },
{ name: "Mc Chick", to: "info@donalds.org" },
{ name: "Donnie Darko", to: "dd@timeshift.info" },
{ name: "Quake The Net", to: "webmaster@quakenet.org" },
{ name: "Dr. Write", to: "write@writable.com" }
];
var course = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl", "javascript1", "javascript2", "javascript3", "javascript4", "javascript5", "javas111111111111111cript6", "javascript7", "javascript8", "javascript9", "javascript10", "javascript11"];
var names = [
{qpName : "zhangsan", jpName : "zs", name : "张三"},
{qpName : "lisi", jpName : "ls", name : "李四"},
{qpName : "wangwu", jpName : "ww", name : "王五"},
{qpName : "maliu", jpName : "ml", name : "马六"},
{qpName : "liuqi", jpName : "lq", name : "刘七"},
{qpName : "linba", jpName : "lb", name : "林八"},
{qpName : "fujiu", jpName : "fj", name : "傅九"},
{qpName : "dengling", jpName : "dl", name : "邓零"},
{qpName : "zhaoyi", jpName : "zy", name : "赵一"},
{qpName : "huanger", jpName : "he", name : "黄二"}
];
$(function(){
//普通测试
$("#suggest1").autocomplete(course);
//方法测试
$("#emailsAuto").autocomplete(emails, {
width:400,
minChars:1,
max:50,
delay:500,
//autoFill:true,
mustMatch:false,
matchContains:true,
selectFirst:false,
cacheLength:1,
matchSubset:true,
matchCase:false,
multiple:false,
multipleSeparator:",",
scroll:true,
scrollHeight:5,
formatItem:function(row, i, max){
return row.name + "【"+ row.to +"】" + i + " -- " + max;
},
formatResult:function(row, i, max){
return row.to;
},
formatMatch:function(row, i, max){
return row.to;
}
//extraParams:{},
}).result(function(event, data, formatted) {
//如选择后给其他控件赋值,触发别的事件等等
//$("#emailsAuto").val("123123");
}
);
/*
$("#emailsAuto").autocomplete(emails, {
width: 400px, //指定下拉框的宽度. Default: input元素的宽度,超过将隐藏
minChars:0, //在触发autoComplete前用户至少需要输入的字符数.Default: 1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表
max:3, //autoComplete下拉显示项目的个数.Default: 10
delay:5000, //击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
autoFill: true, //要不要在用户选择时自动将第一个值填入到input框. Default: false
mustMatch:false, //如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false,并且输入框的内容会被清掉
matchContains:false, //决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false, 相当于全模糊
selectFirst:false, //如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true
cacheLength:1, //缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
matchSubset:true, //autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true
matchCase:false, //比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false
multiple:false, //是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
multipleSeparator:",", //如果是多选时,用来分开各个选择的字符. Default: ","
scroll:true, //当结果集大于默认高度时是否使用卷轴显示 Default: true
scrollHeight:100, //自动完成提示的卷轴高度用像素大小表示 Default: 180
formatItem:none, //为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
formatResult:none, //和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
formatMatch:none, //对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
extraParams:{}, //为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.aspx?q=foo&bar=4 (假设当前用户输入了foo). Default: {}
}).result(function(event, data, formatted) {
//如选择后给其他控件赋值,触发别的事件等等
}
);
*/
//显示、值、匹配测试
$("#staff").autocomplete(names, {
width:300,
matchContains:true,
scroll:true,
scrollHeight:100,
formatItem:function(row, i, max){
return row.name;
},
formatResult:function(row, i, max){
return row.name;
},
formatMatch:function(row, i, max){
return row.qpName + row.jpName + row.name;
}
});
});
</script>
</head>
<body>
<label>Single City (local):</label>
course: <input type="text" id="suggest1" /><br/>
emails: <input type="text" id="emailsAuto" style="width:400px;" /><br/>
names: <input type="text" id="staff" style="width:300px;" /><br/>
</body>
</html>
- test.rar (33.3 KB)
- 下载次数: 293
发表评论
-
Eclipse中Hibernate Tools安装使用
2015-09-02 14:05 517eclipse->Help>Install Ne ... -
Excel保护破解
2015-08-12 15:56 677打开受保护的Excel表格,按“ALT”+“F11”键, ... -
在Web项目中配置Log4j
2014-02-19 21:29 8695在Web项目中配置Log4j 1. 动态的改 ... -
C3P0连接池详细配置
2014-02-19 21:17 697C3P0连接池详细配置 <c3p0-config ... -
转:js获取各种高度
2013-07-09 19:10 1006<script type="text/jav ... -
转:json的stringify方法作用
2013-07-04 00:14 1566可使用JSON.parse(str)将其转化为json对象 ... -
Sublime Text 2快捷键~
2013-06-30 23:19 948Ctrl+L 选择整行(按住-继续选择下行) Ctrl+ ... -
jquery表单验证-自定义及常用验证(转)
2013-04-04 23:14 1307<script type="text/java ... -
PL/SQL执行存储过程
2013-04-01 18:11 10291、PL/SQL中SQL窗口执行过程: BEGIN DBMS ... -
jboss、tomcat自定义classpath(转)
2013-04-01 14:16 3993现在的项目中自定义了很多共通的jar包,这些jar包如何导 ... -
EL表达式和JSTL标签(转)
2013-03-31 15:37 1281在JSP页面中,使用标签库代替传统的Java语言来实 ... -
EL表达式和JSTL标签(转)
2013-03-31 15:34 0在JSP页面中,使用标签 ... -
简单的导出excel
2013-03-25 16:29 942response.setContentType("a ... -
JS中URL编码参数(转) --- 乱码经过编码两次得以解决
2013-03-17 14:01 4251网上有很多文字作品写 ... -
GreyBox官网~~
2013-03-01 17:36 945http://orangoo.com/labs/GreyBox ... -
(转)SQL 优化原则
2013-02-28 10:29 666一、问题的提出 在应用系统开发初期,由于开发数据库数据比 ... -
修改tomcat项目的图标
2013-02-28 10:23 793部署在tomcat中的项目在运行的时候,地址栏都是那个标志的小 ... -
如何修改和查看tomcat内存大小
2013-02-28 10:06 977为了解决tomcat在大进行 ... -
eclipse修改内存启动参数
2013-02-28 09:56 4966一般安装完eclipse之后,在安装目录下你应该可以看到有一个 ... -
Sybase数据bcp导出
2013-02-27 18:30 1317命令行操作Sybase以及数据bcp导出: C:\Docum ...
相关推荐
jquery autocomplete官方版(源代码+示例) 自动补充功能非常实用
NULL 博文链接:https://demojava.iteye.com/blog/791962
demo,可直接运行查看效果,实现的效果是:在输入框中输入汉字时触发keyup事件,即自动出现多个选项,选中某选项时自动将该选项值和所需属性填充到指定输入框中。
1、普通text input,通过$("#Text1").KingAutoSelect(settings, DropDownColumns, "/CommonPage/getUserList.ashx")即可控件化; 2、支持键盘上、下键选择,回车即可选中相应数据,其中“值“存放于控件的...
数据库采用SQL Server2000的Customers表。数据正常显示。内含jquery autocomplete示例。有兴趣的朋友可以共同讨论。QQ:168765155
jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...
Jquery autocomplete插件的使用示例 ,不用引用网络资源,点开即用,有不懂的可以加我微信:datou-leo。
1,本示例是基于微软拼音类库的jquery.autocomplete自动拼音首字母匹配搜索实现,解决了多音字匹配问题。 2,由于用了Linq查询,所以至少需要.NET Framework 3.5。 4,由于jquery匹配时的match项和result项来自不同...
一个Js文件,一个html文件(包含css),一个参数说明文档。非常清楚!
见我的博客http://hi.baidu.com/passedbylove/blog/item/6d61278b5669f9769f2fb44f.html
jQuery AutoComplete是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入 提示功能,而且示例本身也是...
jquery.autocomplete插件的参数详细说明、重要函数讲解、应用实例、中文匹配、注意问题等。并包含了使用实例。
这个是我在学习jquery过程中积累下来的一点东西.有些示例在我前面上传的资源中已经有了.里面都是一些入门性的示例.数据库采用的SQLServer2000的northwind数据库.数据访问用了Enterprise library DAAB;虽然只是简单的...
主要介绍了jquery UI实现autocomplete在获取焦点时得到显示列表功能,结合实例形式分析了jquery UI实现autocomplete事件响应及显示下拉列表功能操作技巧,需要的朋友可以参考下
本文实例讲述了jquery插件autocomplete用法。分享给大家供大家参考,具体如下: (1)引入js和样式 [removed][removed] [removed][removed] <link href="css/jquery.autocomplete.css" rel="Stylesheet"> (2)a
本示例为jquery自动补全的示例,其中包括两部分,第一是在本地构造的json格式的数据供自动补全用,第二是从后台将数据处理成json格式,jquery通过ajax请求后台的json数据,其中还有处理autocomplete不支持中文的方法...
jQuery自动完成示例 本文可帮助您使用jQuery库创建自动完成文本框。 这还将为您提供有关jQuery AutoComplete UI,CSS和select事件的详细信息。 在本示例中,您将创建一个将连接到Northwind数据库的ASP.NET Web窗体...
包括新增的demo示例,以及官方文档的解说,方法说明,主要是ajax请求自动补全的示例