- 浏览: 179908 次
- 性别:
- 来自: 广州
文章分类
最新评论
使用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 576eclipse->Help>Install Ne ... -
Excel保护破解
2015-08-12 15:56 727打开受保护的Excel表格,按“ALT”+“F11”键, ... -
在Web项目中配置Log4j
2014-02-19 21:29 8733在Web项目中配置Log4j 1. 动态的改 ... -
C3P0连接池详细配置
2014-02-19 21:17 733C3P0连接池详细配置 <c3p0-config ... -
转:js获取各种高度
2013-07-09 19:10 1059<script type="text/jav ... -
转:json的stringify方法作用
2013-07-04 00:14 1628可使用JSON.parse(str)将其转化为json对象 ... -
Sublime Text 2快捷键~
2013-06-30 23:19 986Ctrl+L 选择整行(按住-继续选择下行) Ctrl+ ... -
jquery表单验证-自定义及常用验证(转)
2013-04-04 23:14 1370<script type="text/java ... -
PL/SQL执行存储过程
2013-04-01 18:11 11481、PL/SQL中SQL窗口执行过程: BEGIN DBMS ... -
jboss、tomcat自定义classpath(转)
2013-04-01 14:16 4078现在的项目中自定义了很多共通的jar包,这些jar包如何导 ... -
EL表达式和JSTL标签(转)
2013-03-31 15:37 1407在JSP页面中,使用标签库代替传统的Java语言来实 ... -
EL表达式和JSTL标签(转)
2013-03-31 15:34 0在JSP页面中,使用标签 ... -
简单的导出excel
2013-03-25 16:29 1005response.setContentType("a ... -
JS中URL编码参数(转) --- 乱码经过编码两次得以解决
2013-03-17 14:01 4336网上有很多文字作品写 ... -
GreyBox官网~~
2013-03-01 17:36 1031http://orangoo.com/labs/GreyBox ... -
(转)SQL 优化原则
2013-02-28 10:29 746一、问题的提出 在应用系统开发初期,由于开发数据库数据比 ... -
修改tomcat项目的图标
2013-02-28 10:23 852部署在tomcat中的项目在运行的时候,地址栏都是那个标志的小 ... -
如何修改和查看tomcat内存大小
2013-02-28 10:06 1049为了解决tomcat在大进行 ... -
eclipse修改内存启动参数
2013-02-28 09:56 5061一般安装完eclipse之后,在安装目录下你应该可以看到有一个 ... -
Sybase数据bcp导出
2013-02-27 18:30 1413命令行操作Sybase以及数据bcp导出: C:\Docum ...
相关推荐
<title>jQuery AutoComplete 示例 <script src="https://code.jquery.com/jquery-3.x.y.min.js"></script> <link rel="stylesheet" href="path/to/jquery-ui.min.css"> <script src="path/to/jquery-ui.min.js">...
《jQuery Autocomplete 全面解析》 jQuery Autocomplete 是一个非常实用的插件,它为网页表单输入框提供了自动补全功能,极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需...
**jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...
在压缩包文件“demo”中,可能包含了一个简单的示例项目,用于演示如何将jQuery Autocomplete与DWR结合以及如何修改数据处理。这个例子可能包括HTML、CSS、JavaScript以及Java代码,可以帮助开发者理解整个流程。...
在提供的文件列表中,"AutocopmletePage"可能是包含了修改后的jQuery autocomplete分页插件的源代码或示例项目。通过分析这些文件,我们可以深入理解如何实现这个功能,包括可能的JavaScript和CSS代码,以及相关的...
在这个示例中,可能还需要引用`jquery.autocomplete.js`文件,这是插件的核心实现。 2. **HTML结构**:在HTML中设置一个input元素,为其添加一个特定的ID,如`searchBox`,用于之后的jQuery选择器定位。 3. **初始化...
1,本示例是基于微软拼音类库的jquery.autocomplete自动拼音首字母匹配搜索实现,解决了多音字匹配问题。 2,由于用了Linq查询,所以至少需要.NET Framework 3.5。 4,由于jquery匹配时的match项和result项来自不同...
在压缩包`jQuery-Autocomplete-master`中,通常包含了`jquery.autocomplete.js`源码文件、示例代码、CSS样式文件以及可能的文档。开发者可以通过阅读示例和文档,快速理解和应用这个插件。同时,由于它是开源的,...
<title>jQuery Autocomplete 示例 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> ...
<title>jQuery Autocomplete 示例 <link rel="stylesheet" href="jquery-ui.min.css"> <script src="jquery.min.js"> <script src="jquery-ui.min.js"> $(function() { var availableTags = ["Apple", ...
### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中,提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...
**jQuery Autocomplete** 是一个流行的JavaScript库,用于在输入框中实现自动补全或提示功能。这个官方版本包含了源代码和示例,帮助开发者更好地理解和使用这个插件。自动补全功能广泛应用于搜索框、表单输入等场景...
在压缩包中的 `jquery.autocomplete使用方法.txt` 文件,应该包含了详细的使用示例和代码解释,你可以参考这个文件来了解如何在实际项目中应用 AutoComplete 插件。 ### 6. 扩展功能 jQuery AutoComplete 还支持...
**jQuery AutoComplete 知识点详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全的功能,广泛应用于网页表单、搜索框等场景,以提高用户体验。这个插件允许开发者从本地数组或...
在压缩包文件中,"autocomplete"可能是包含了实现jQuery Autocomplete功能的相关文件,如JavaScript脚本、CSS样式文件、示例HTML文件等。这些文件可能包含了具体的代码示例,供开发者参考和学习,以便在自己的项目中...
这个"jQuery-Autocomplete-master"压缩包提供了一个简单的示例,用于演示如何利用jQuery实现自动补全功能,同时支持通过AJAX动态获取数据以及从本地加载数据。 1. **jQuery Autocomplete 插件**: jQuery ...
**jQuery AutoComplete 使用详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全功能,常用于搜索框、表单输入等场景,极大地提升了用户体验。本篇将详细介绍如何使用 jQuery ...
**jQuery Autocomplete** 是一个非常流行的JavaScript库,用于在用户输入时提供动态的下拉建议。这个功能在很多网站上都能看到,比如百度搜索框的提示效果,它极大地提升了用户体验,减少了用户输入的负担,提高了...
<title>jQuery Autocomplete 示例 <link rel="stylesheet" href="path/to/jquery-ui.css"> <script src="path/to/jquery.js"> <script src="path/to/jquery-ui.js"> 搜索: $(function() { var ...