jQuery UI API - membro di completamento automatico (Autocomplete Widget)
categoria
uso
Descrizione: di ricerca e filtro del valore completamento automatico in base all'input dell'utente, permettendo agli utenti di trovare rapidamente e selezionare da un elenco di valori predefiniti.
Nuova versione: 1.8
Ogni campo può ricevere input può essere convertito in Autocomplete, vale a dire, <input>
elemento, <textarea>
elemento e con contenteditable
elemento attributi.
Dando completamento automatico messa a fuoco o campo in cui si immettono i caratteri, il tappo ha cominciato a cercare una voce corrispondente e visualizzare un elenco di valori alternativi. Entrando più caratteri, l'utente può filtrare l'elenco per ottenere una migliore corrispondenza.
I componenti possono essere utilizzati per selezionare il valore precedentemente selezionato come ingresso o tag indirizzo e-mail Input Address dalla rubrica. Completamento automatico anche essere usato per riempire le informazioni rilevanti, come ad esempio inserire il nome di una città per ottenere CAP della città.
È possibile ottenere da una fonte di dati di origine locale o remota: la fonte locale per i piccoli insiemi di dati, ad esempio, una rubrica con 50 voci; fonte remota per grandi insiemi di dati, ad esempio, con centinaia o migliaia voci del database. Per ulteriori informazioni sulla fonte di dati personalizzati, vedere le source
opzioni del documento.
l'interazione della tastiera
Quando il menu è aperto, i seguenti comandi da tastiera sono disponibili:
- UP - Spostare il cursore alla voce precedente. Se sul primo punto, quindi spostare il focus per l'ingresso (input). Se l'ingresso (input), l'attenzione si sposterà l'ultimo elemento.
- DOWN - per spostare l'attenzione alla voce successiva. Se l'ultima voce, quindi spostare il focus per l'ingresso (input). Se l'ingresso (input), l'attenzione si sposterà sul primo elemento.
- ESCAPE - off menu.
- ENTER - Selezionare il progetto corrente è attiva, e chiudere il menu.
- TAB - arriva a selezionare il focus attuale del progetto, chiudere il menu, e spostare il focus per i prossimi elementi focusable (focusable).
- PAGE UP / DOWN - scorrere uno schermo progetti (in base all'altezza del menu).
Quando il menu è chiuso, i seguenti comandi da tastiera sono disponibili:
- UP / DOWN - se soddisfano
minLength
, quindi aprire il menu.
tematizzazione
membro di completamento automatico (Autocomplete Widget) utilizzando framework jQuery UI CSS per definire l'aspetto del suo stile. Se è necessario utilizzare lo stile membro di completamento automatico designato, è possibile utilizzare il seguente nome della classe CSS:
-
ui-autocomplete
: per abbinare visualizzato dell'utente menu (menu) -
ui-autocomplete-input
: componente di completamento automatico (Autocomplete Widget) Esempi di elementi di input.
fare affidamento
- nucleo UI (UI Core)
- Component Library (Widget Factory)
- Location (Posizione)
- Componente Menu (Menu Widget)
Ulteriori informazioni
- La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.
- I componenti da manipolare programmazione il valore dell'elemento, in modo che quando il valore delle modifiche elemento non innescare nativi
change
eventi.
navigazione rapida
选项 | 方法 | 扩展点 | 事件 |
---|---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
appendTo | Selector | 菜单应该被附加到哪一个元素。当该值为 null 时,输入域的父元素将检查 ui-front class。如果找到带有 ui-front class 的元素,菜单将被附加到该元素。如果未找到带有 ui-front class 的元素,不管值为多少,菜单将被附加到 body。 注意:当建议菜单打开时, 代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ appendTo: "#someElem" }); 在初始化后,获取或设置 // getter var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" ); // setter $( ".selector" ).autocomplete( "option", "appendTo", "#someElem" ); |
null |
autoFocus | Boolean | 如果设置为 true ,当菜单显示时,第一个条目将自动获得焦点。代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ autoFocus: true }); 在初始化后,获取或设置 // getter var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" ); // setter $( ".selector" ).autocomplete( "option", "autoFocus", true ); |
false |
delay | Integer | 按键和执行搜索之间的延迟,以毫秒计。对于本地数据,采用零延迟是有意义的(更具响应性),但对于远程数据会产生大量的负荷,同时降低了响应性。 代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ delay: 500 }); 在初始化后,获取或设置 // getter var delay = $( ".selector" ).autocomplete( "option", "delay" ); // setter $( ".selector" ).autocomplete( "option", "delay", 500 ); |
300 |
disabled | Boolean | 如果设置为 true ,则禁用该 autocomplete。代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).autocomplete( "option", "disabled" ); // setter $( ".selector" ).autocomplete( "option", "disabled", true ); |
false |
minLength | Integer | 执行搜索前用户必须输入的最小字符数。对于仅带有几项条目的本地数据,通常设置为零,但是当单个字符搜索会匹配几千项条目时,设置个高数值是很有必要的。 代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ minLength: 0 }); 在初始化后,获取或设置 // getter var minLength = $( ".selector" ).autocomplete( "option", "minLength" ); // setter $( ".selector" ).autocomplete( "option", "minLength", 0 ); |
1 |
position | Object | 标识建议菜单的位置与相关的 input 元素有关系。 of 选项默认为 input 元素,但是您可以指定另一个定位元素。如需了解各种选项的更多细节,请查看 jQuery UI 定位(Position) 。代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } }); 在初始化后,获取或设置 // getter var position = $( ".selector" ).autocomplete( "option", "position" ); // setter $( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } ); |
{ my: "left top", at: "left bottom", collision: "none" } |
source | Array 或 String 或 Function( Object request, Function response( Object data ) ) | 定义要使用的数据,必须指定。 独立于您要使用的变量,标签总是被视为文本。如果您想要标签被视为 html,您可以使用 Scott Gonzalez' html 扩展 。演示侧重于 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] }); 在初始化后,获取或设置 // getter var source = $( ".selector" ).autocomplete( "option", "source" ); // setter $( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] ); |
none; must be specified |
方法 | 返回 | 描述 |
---|---|---|
close() | jQuery (plugin only) | 关闭 Autocomplete 菜单。当与 search 方法结合使用时,可用于关闭打开的菜单。
代码实例: 调用 close 方法: $( ".selector" ).autocomplete( "close" ); |
destroy() | jQuery (plugin only) | 完全移除 autocomplete 功能。这会把元素返回到它的预初始化状态。
代码实例: 调用 destroy 方法: $( ".selector" ).autocomplete( "destroy" ); |
disable() | jQuery (plugin only) | 禁用 autocomplete。
代码实例: 调用 disable 方法: $( ".selector" ).autocomplete( "disable" ); |
enable() | jQuery (plugin only) | 启用 autocomplete。
代码实例: 调用 enable 方法: $( ".selector" ).autocomplete( "enable" ); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 调用该方法: var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 autocomplete 选项哈希。
代码实例: 调用该方法: var options = $( ".selector" ).autocomplete( "option" ); |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 autocomplete 选项的值。
代码实例: 调用该方法: $( ".selector" ).autocomplete( "option", "disabled", true ); |
option( options ) | jQuery (plugin only) | 为 autocomplete 设置一个或多个选项。
代码实例: 调用该方法: $( ".selector" ).autocomplete( "option", { disabled: true } ); |
search( [value ] ) | jQuery (plugin only) | 触发 search 事件,如果该事件未被取消则调用数据源。当被点击时,可被类似选择框按钮用来打开建议。当不带参数调用该方法时,则使用当前输入的值。可带一个空字符串和 minLength: 0 进行调用,来显示所有的条目。
代码实例: 调用 search 方法: $( ".selector" ).autocomplete( "search", "" ); |
widget() | jQuery | 返回一个包含菜单元素的 jQuery 对象。虽然菜单项不断地被创建和销毁。菜单元素本身会在初始化时创建,并不断的重复使用。
代码实例: 调用 widget 方法: $( ".selector" ).autocomplete( "widget" ); |
扩展点 | 返回 | 描述 |
---|---|---|
自动完成部件(Autocomplete Widget)通过 部件库(Widget Factory) 创建的,且可被扩展。当对部件进行扩展时,您可以重载或者添加扩展部件的行为。下面提供的方法作为扩展点,与上面列出的 插件方法 具有相同的 API 稳定性。如需了解更多有关小部件扩展的知识,请查看 通过部件库(Widget Factory)扩展小部件 . | ||
_renderItem( ul, item ) | jQuery | Method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it. Note: At this time the
代码实例: 添加条目的值作为 _renderItem: function( ul, item ) { return $( "<li>" ) .attr( "data-value", item.value ) .append( $( "<a>" ).text( item.label ) ) .appendTo( ul ); } |
_renderMenu( ul, items ) | jQuery (plugin only) | 该方法负责在菜单显示前调整菜单尺寸。菜单元素可通过 this.menu.element 使用。
代码实例: 添加一个 CSS class 名称到旧的菜单项。 _renderMenu: function( ul, items ) { var that = this; $.each( items, function( index, item ) { that._renderItemData( ul, item ); }); $( ul ).find( "li:odd" ).addClass( "odd" ); } |
_resizeMenu() | jQuery (plugin only) | 该方法负责在菜单显示前调整菜单尺寸。菜单元素可通过 this.menu.element 使用。
代码实例: 菜单总是显示为 500 像素宽。 _resizeMenu: function() { this.menu.element.outerWidth( 500 ); } |
事件 | 类型 | 描述 |
---|---|---|
change( event, ui ) | autocompletechange | 如果输入域的值改变则触发该事件。
代码实例: 初始化带有指定 change 回调的 autocomplete: $( ".selector" ).autocomplete({ change: function( event, ui ) {} }); 绑定一个事件监听器到 autocompletechange 事件: $( ".selector" ).on( "autocompletechange", function( event, ui ) {} ); |
close( event, ui ) | autocompleteclose | 当菜单隐藏时触发。不是每一个 close 事件都伴随着 change 事件。
注意: 代码实例: 初始化带有指定 close 回调的 autocomplete: $( ".selector" ).autocomplete({ close: function( event, ui ) {} }); 绑定一个事件监听器到 autocompleteclose 事件: $( ".selector" ).on( "autocompleteclose", function( event, ui ) {} ); |
create( event, ui ) | autocompletecreate | 当创建 autocomplete 时触发。
注意: 代码实例: 初始化带有指定 create 回调的 autocomplete: $( ".selector" ).autocomplete({ create: function( event, ui ) {} }); 绑定一个事件监听器到 autocompletecreate 事件: $( ".selector" ).on( "autocompletecreate", function( event, ui ) {} ); |
focus( event, ui ) | autocompletefocus | 当焦点移动到一个条目上(未选择)时触发。默认的动作是把文本域中的值替换为获得焦点的条目的值,即使该事件是通过键盘交互触发的。取消该事件会阻止值被更新,但不会阻止菜单项获得焦点。
代码实例: 初始化带有指定 focus 回调的 autocomplete: $( ".selector" ).autocomplete({ focus: function( event, ui ) {} }); 绑定一个事件监听器到 autocompletefocus 事件: $( ".selector" ).on( "autocompletefocus", function( event, ui ) {} ); |
open( event, ui ) | autocompleteopen | 当打开建议菜单或者更新建议菜单时触发。
注意: 代码实例: 初始化带有指定 open 回调的 autocomplete: $( ".selector" ).autocomplete({ open: function( event, ui ) {} }); 绑定一个事件监听器到 autocompleteopen 事件: $( ".selector" ).on( "autocompleteopen", function( event, ui ) {} ); |
response( event, ui ) | autocompleteresponse | 在搜索完成后菜单显示前触发。用于建议数据的本地操作,其中自定义的 source 选项回调不是必需的。该事件总是在搜索完成时触发,如果搜索无结果或者禁用了 Autocomplete,导致菜单未显示,该事件一样会被触发。
代码实例: 初始化带有指定 response 回调的 autocomplete: $( ".selector" ).autocomplete({ response: function( event, ui ) {} }); 绑定一个事件监听器到 autocompleteresponse 事件: $( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} ); |
search( event, ui ) | autocompletesearch | 在搜索执行前满足 minLength 和 delay 后触发。如果取消该事件,则不会提交请求,也不会提供建议条目。
注意: 代码实例: 初始化带有指定 search 回调的 autocomplete: $( ".selector" ).autocomplete({ search: function( event, ui ) {} }); 绑定一个事件监听器到 autocompletesearch 事件: $( ".selector" ).on( "autocompletesearch", function( event, ui ) {} ); |
select( event, ui ) | autocompleteselect | 当从菜单中选择条目时触发。默认的动作是把文本域中的值替换为被选中的条目的值。取消该事件会阻止值被更新,但不会阻止菜单关闭。
代码实例: 初始化带有指定 select 回调的 autocomplete: $( ".selector" ).autocomplete({ select: function( event, ui ) {} }); 绑定一个事件监听器到 autocompleteselect 事件: $( ".selector" ).on( "autocompleteselect", function( event, ui ) {} ); |
Esempi
Esempio 1:Un semplice jQuery UI auto-completamento (Autocomplete).
<! Html Doctype> <Html lang = "it"> <Head> <META charset = "utf-8"> <Title> membro di completamento automatico (Autocomplete Widget) Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script> <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Head> <Body> <Label for = "autocomplete"> selezionare un linguaggio di programmazione: </ label> <Input id = "autocomplete"> <Script> $ ( "#autocomplete") .autocomplete ({ fonte: [ "C ++", "Java", "php", "ColdFusion", "javascript", "asp", "ruby"] }); </ Script> </ Corpo> </ Html>Esempio 2:
Iniziare a utilizzare la correzione fonte personalizzati in base alle condizioni.
<! Html Doctype> <Html lang = "it"> <Head> <META charset = "utf-8"> <Title> membro di completamento automatico (Autocomplete Widget) Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script> <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Head> <Body> <Label for = "autocomplete"> selezionare un linguaggio di programmazione: </ label> <Input id = "autocomplete"> <Script> var tag = [ "C ++", "Java", "php", "ColdFusion", "JavaScript", "asp", "ruby"]; $ ( "#autocomplete") .autocomplete ({ fonte: la funzione (richiesta, risposta) { var Matcher = new RegExp ( "^" + $ .ui.autocomplete.escapeRegex (request.term), "i"); risposta ($ .grep (tag, la funzione (voce) { tornare matcher.test (voce); })); } }); </ Script> </ Corpo> </ Html>