jquery-autocomplete的用法及参数
用法:
<script language="javascript"
src="${pageContext.request.contextPath}/js/jquery.autocomplete.js"></script>//引入插件
<input type="text" id="sa" />//定义控件
<script type="text/javascript">
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];//定义数据
$("#sa").autocomplete(months, {//使用方法
minChars: 0,
max: 12,
autoFill: true,
scroll: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220,
formatItem: function(data, i, total) {
// don't show the current month in the list of values (for whatever reason)
if ( data[0] == months[new Date().getMonth()] )
return false;
return data[0];
}
});
</script>
参数说明:
* minChars (Number):
在触发autoComplete前用户至少需要输入的字符数.Default: 1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表
* width (Number):
指定下拉框的宽度. Default: input元素的宽度
* max (Number):
autoComplete下拉显示项目的个数.Default: 10
* delay (Number):
击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
* autoFill (Boolean):
要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false
* mustMatch (Booolean):
如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false
* matchContains (Boolean):
决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
* selectFirst (Boolean):
如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true
* cacheLength (Number):
缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
* matchSubset (Boolean):
autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true
* matchCase (Boolean):
比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false
* multiple (Boolean):
是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
* multipleSeparator (String):
如果是多选时,用来分开各个选择的字符. Default: ","
* scroll (Boolean):
当结果集大于默认高度时是否使用卷轴显示 Default: true
* scrollHeight (Number):
自动完成提示的卷轴高度用像素大小表示 Default: 180
* formatItem (Function):
为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
* formatResult (Function):
和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
* formatMatch (Function):
对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
* extraParams (Object):
为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}
* result (handler) Returns: jQuery
此事件会在用户选中某一项后触发,参数为:
event: 事件对象. event.type为result.
data: 选中的数据行.
formatted:formatResult函数返回的值
例如:
$("#singleBirdRemote").result(function(event, data, formatted) {
//如选择后给其他控件赋值,触发别的事件等等
});
没有合适的资源?快使用搜索试试~ 我知道了~
jquery autocomplete 控件
共113个文件
jpg:90个
js:8个
php:3个
5星 · 超过95%的资源 需积分: 8 42 下载量 172 浏览量
2010-09-10
17:06:20
上传
评论 1
收藏 542KB RAR 举报
温馨提示
autocomplete autocomplete控件 例子 包括源文件
资源推荐
资源详情
资源评论
收起资源包目录
jquery autocomplete 控件 (113个子文件)
thickbox.css 4KB
main.css 1KB
jquery.autocomplete.css 797B
indicator.gif 2KB
bg.gif 1KB
index.html 7KB
json.html 2KB
WienRiesenrad.jpg 9KB
Olimje_Kirche und Apotheke in Olimje.jpg 8KB
PoertschachSchlossLeonstain.jpg 7KB
WienMusikverein.jpg 7KB
Leuven.jpg 7KB
GrandDixence.jpg 7KB
Grad_Burg Grad2.jpg 7KB
Leeuwarden Fries Museum.jpg 7KB
Bled_Die Burg von Bled.jpg 7KB
LuzernAltstadt.jpg 7KB
WienRingstrasse.jpg 6KB
Lyon.jpg 6KB
LeMans.jpg 6KB
Gent Hotel de Ville2.jpg 6KB
Prag Altstaedter Ring.jpg 6KB
Bouillon.jpg 6KB
Leuven Museum fuer Kirchenkunst.jpg 6KB
Metlika_Bela Krajina Museum.jpg 6KB
Kamnik_Die Franziskaner Bibliothek.jpg 6KB
Kazimierz.jpg 6KB
KlagenfurtDom.jpg 6KB
BordeauxND.jpg 6KB
Bogojina_Die Pfarrkirche.jpg 6KB
Antwerpen Rubenshaus.jpg 6KB
WienMuseumsQuartier.jpg 6KB
Appenzell.jpg 6KB
GrenoblePanorama.jpg 6KB
LeHavreHafen.jpg 6KB
Amsterdam.jpg 6KB
Luxemburg.jpg 6KB
ObervellachBurgFalkenstein.jpg 6KB
Gossensass.jpg 6KB
OrleansParcFloraldelaSource.jpg 6KB
Gnesen.jpg 6KB
Maastricht St Servaasbasiliek.jpg 6KB
OlympischesMuseumLausanne.jpg 6KB
GrottenvonReclere.jpg 6KB
Olomouc.jpg 5KB
MilanoDom.jpg 5KB
Bolsward Martinikerk.jpg 5KB
Mailand3.jpg 5KB
SalzburgResidenz.jpg 5KB
Portoroz.jpg 5KB
Guebwiller.jpg 5KB
OrleansMaisonJeannedArc.jpg 5KB
Novo Mesto_Das Museum.jpg 5KB
Giessbachfaelle Brienz.jpg 5KB
OstiaAntica.jpg 5KB
BolognaPiazzaMaggiore.jpg 5KB
Karlsbad Muehlbrunnkolonnade.jpg 5KB
Lednice.jpg 5KB
Groningen.jpg 5KB
SalzbergwerkWieliczka.jpg 5KB
SalzburgFestungHohensalzburg.jpg 5KB
Salzbergwerk Bex.jpg 5KB
Bolsward Stadhuis.jpg 5KB
MagiatalMaggia.jpg 5KB
Prag Waldsteinpalais.jpg 5KB
Leper Halles aux draps.jpg 5KB
GenuaStrand.jpg 5KB
Maastricht.jpg 5KB
Bolsward.jpg 5KB
Amsterdam Van-Gogh Museum.jpg 5KB
BordeauxPlaceB.jpg 5KB
Ostrow Tumski.jpg 5KB
Gornij Grad_KATHEDRALE.jpg 5KB
Lemmer.jpg 5KB
OdenseeAndersen.jpg 4KB
LuzernPicassoMuseum.jpg 4KB
RouenNotreDame.jpg 4KB
Posen.jpg 4KB
KirchbergAltesRathaus1.jpg 4KB
BotanischerGartenZuerich.jpg 4KB
LazienkiparkWarschau.jpg 4KB
Arnhem Historisches Museum.jpg 4KB
MilanoCastelloSforzesco.jpg 4KB
Maastricht Walmuur.jpg 4KB
Postojna.jpg 4KB
Leeuwarden.jpg 4KB
GenuabeiNacht.jpg 4KB
Giethoorn.jpg 4KB
Maastricht Onze Lieve Vrou...jpg 4KB
BolognaFontanadelNettuno.jpg 4KB
MilazzoBurg.jpg 3KB
Antwerpen.jpg 3KB
Gent.jpg 3KB
Bled.jpg 3KB
BolognaBasilicadiSanPetronio.jpg 3KB
KleineMeerjungfreu.jpg 3KB
Lelystad.jpg 2KB
jquery.js 98KB
jquery.autocomplete.js 21KB
localdata.js 15KB
共 113 条
- 1
- 2
zheng-zx
- 粉丝: 3
- 资源: 11
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- DMG3407SSN-VB一款SOT23封装P-Channel场效应MOS管
- DMG3407SSN-7-VB一款SOT23封装P-Channel场效应MOS管
- DMG3401LSN-VB一款SOT23封装P-Channel场效应MOS管
- CloudCompareV2.13.0
- DMC4050SSD-13-VB一款N+P-Channel沟道SOP8的MOSFET晶体管参数介绍与应用说明
- 1166-加减运算器实验.ms14
- DMC4040SSD-13-VB一款SOP8封装N+P-Channel场效应MOS管
- 绿茶基本知识及冲泡PPT
- 2001-2019上市公司历史业绩预期差距计算Stata代码(附2001-2019年数据和结果)
- DMC4028SSD-VB一款SOP8封装N+P-Channel场效应MOS管
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页