Autocomplete ist ein UI-Tool, mit dem Benutzer weniger vollständige Informationen eingeben müssen. Normalerweise
Geben Sie Ihre E-Mail-Adresse, Suchbegriffe usw. ein und extrahieren Sie dann die entsprechende vollständige Zeichenfolge, damit der Benutzer sie auswählen kann.
1. Rufen Sie die autocomplete()-Methode
auf$('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], });
2. Ändern Sie den Autocomplete()-Stil
Da es sich bei der autocomplete()-Methode um ein Popup-Fenster handelt, ist dies der Maus-Hover-Stil. Möchten Sie
über Firebug erhalten?
Für den Stil des Hintergrunds beim Schweben finden Sie das entsprechende CSS direkt in jquery.ui.css.
//无须修改ui 里的CSS,直接用style.css 替代掉 .ui-menu-item a.ui-state-focus { background:url(../img/xxx.png); }
3. Attribute der autocomplete()-Methode
Es gibt zwei Formen automatischer Vervollständigungsmethoden: 1. Autocomplete (Optionen), Optionen sind Objekt-Schlüssel-Wert-Paare
Übergeben Sie Parameter im Formular. Jedes Schlüssel-Wert-Paar stellt eine Option dar. 2.autocomplete('action', param), action
Es handelt sich um eine Zeichenfolge, die die Dialogbox-Methode betreibt, und param ist eine Option in Optionen.
Attribut
|
Standardwert/-typ<🎜> | Beschreibung<🎜> | ||||||||||||||||||
deaktiviert <🎜> | false/Boolean<🎜> | Auf true setzen, um die automatische Vervollständigung zu deaktivieren. <🎜> | ||||||||||||||||||
Quelle <🎜> | Keine/Array<🎜> | Geben Sie die Datenquelle an, die lokal oder remote sein kann. <🎜> | ||||||||||||||||||
minLength <🎜> | 1/Wert<🎜> | Der Standardwert ist 1. Dies ist die Mindestanzahl an Zeichen, die zum Auslösen der Vervollständigungsliste erforderlich ist. <🎜> | ||||||||||||||||||
Verzögerung <🎜> | 300/Wert<🎜> | Standard ist 300 Millisekunden, Einstellung für die Anzeigeverzögerung. <🎜> | ||||||||||||||||||
autoFocus <🎜> | false/Boolean<🎜> | Wenn auf true gesetzt, wird das erste Element automatisch ausgewählt. |
$('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], disabled : false, minLength : 2, delay : 50, autoFocus : true, });
属性 |
默认值/类型 |
说明 |
position |
无/对象 |
使用对象的键值对赋值,有两个属性:my 和at
表示坐标。my 是以目标点左上角为基准,at 以
目标点右下角为基准。
|
$('#email').autocomplete({ position : { my : 'left center', at : 'right center' } });
四.autocomplete()方法的事件
除了属性设置外,autocomplete()方法也提供了大量的事件。这些事件可以给各
种不同状态时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象,不
是整个对话框的div。
autocomplete 事件选项
事件名 |
说明 |
create |
当自动补全被创建时会调用create 方法,该方法有两个
参数(event, ui)。此事件中的ui 参数为空。
|
open |
当自动补全被显示时,会调用open 方法,该方法有两个
参数(event, ui)。此事件中的ui 参数为空。
|
close |
当自动补全被关闭时,会调用close 方法,该方法有两个
参数(event, ui)。此事件中的ui 参数为空。
|
focus |
当自动补全获取焦点时,会调用focus 方法,该方法有两
个参数(event, ui)。此事件中的ui 有一个子属性对象item,
分别有两个属性:label,补全列表显示的文本;value,
将要输入框的值。一般label 和value 值相同。
|
select |
当自动补全获被选定时,会调用select 方法,该方法有两
个参数(event, ui)。此事件中的ui 有一个子属性对象item,
分别有两个属性:label,补全列表显示的文本;value,
将要输入框的值。一般label 和value 值相同。
|
change |
当自动补全失去焦点且内容发生改变时,会调用change
方法,该方法有两个参数(event, ui)。此事件中的ui 参数
为空。
|
search |
当自动补全搜索完成后,会调用search 方法,该方法有
两个参数(event, ui)。此事件中的ui 参数为空。
|
response |
当自动补全搜索完成后,在菜单显示之前,会调用
response 方法,该方法有两个参数(event, ui)。此事件中
的ui 参数有一个子对象content,他会返回label 和value
值,可通过遍历了解。
|
$('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], disabled : false, minLength : 1, delay : 0, focus : function (e, ui) { ui.item.value = '123'; }, select : function (e, ui) { ui.item.value = '123'; }, change : function (e, ui) { alert(''); }, search : function (e, ui) { alert(''); }, }); autocomplete('action', param)方法 <table border="1" cellspacing="1" cellpadding="1" width="700" height="500"><caption>autocomplete('action', param)方法</caption><tbody><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">方法<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">返回值<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">说明<br /></span></td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('close')<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px"> jQuery 对象<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">关闭自动补齐<br /></span></td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('disable')<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px"> jQuery 对象<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">禁用自动补齐<br /></span></td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('enable')<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px"> jQuery 对象<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">启用自动补齐<br /></span></td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('destroy')<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px"> jQuery 对象<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">删除自动补齐,直接阻断<br /></span></td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('widget')<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px"> jQuery 对象<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">获取工具提示的jQuery 对象<br /></span></td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('search',value)<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px"> jQuery 对象<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">在数据源获取匹配的字符串<br /></span></td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('option', param) <br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">一般值<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">获取options 属性的值<br /></span></td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('option', param,value)<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px"> jQuery 对象<br /></span></td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">设置options 属性的值</span></td></tr></tbody></table> $('#reg').on('autocompleteopen', function () { alert('打开时触发!'); });
五、邮箱自动补全
通过自动补全source 属性的function 回调函数,来动态的设置数据源,以达到可以
实现邮箱补全功能。
1.数据源function
自动补全UI 的source 不但可以是数组,也可以是function 回调函数。提供了自带的
两个参数设置动态的数据源。
$('#email').autocomplete({ source : function (request, response) { alert(request.term); //可以获取你输入的值 response(['aa', 'aaaa', 'aaaaaa', 'bb']); //展示补全结果 }, });
注意:这里的response 不会根据你搜索关键字而过滤无关结果,而是把整个结果全部呈现出
来。因为source 数据源,本身就是动态改变的,就由自定义,从而放弃系统内置的搜索能力。
2.邮箱自动补全
$('#email').autocomplete({ autoFocus : true, delay : 0, source : function (request, response) { var hosts = ['qq.com','163.com', '263.com', 'gmail.com', 'hotmail.com'], //起始 term = request.term, //获取输入值 ix = term.indexOf('@'), //@ name = term, //用户名 host = '', //域名 result = []; //结果 //结果第一条是自己输入 result.push(term); if (ix > -1) { //如果有@的时候 name = term.slice(0, ix); //得到用户名 host = term.slice(ix + 1); //得到域名 } if (name) { //得到找到的域名 var findedHosts = (host ? $.grep(hosts, function (value, index) { return value.indexOf(host) > -1; }) : hosts), //最终列表的邮箱 findedResults = $.map(findedHosts, function (value, index) { return name + '@' + value; }); //增加一个自我输入 result = result.concat(findedResults); } response(result); }, });