jQuery UI API - miembro de Autocompletar (Autocompletar Widget)
categoría
uso
Descripción: Valor de búsqueda y filtro de auto-completar en base a la entrada del usuario, permitiendo a los usuarios buscar y seleccionar de una lista de valores preestablecidos rápidamente.
Nueva versión: 1.8
Cualquier campo puede recibir la entrada se puede convertir en Autocompletar, es decir, <input>
elemento, <textarea>
elemento y con contenteditable
atributos de elemento.
Al dar el foco de autocompletar o campo en el que se introducen caracteres, el tapón comenzó a buscar una entrada coincidente y mostrar una lista de valores alternativos. Mediante la introducción de más caracteres, el usuario puede filtrar la lista para obtener un mejor partido.
Los componentes se pueden utilizar para seleccionar el valor previamente seleccionado, tales como entrada o etiqueta de entrada de direcciones de correo electrónico de la libreta de direcciones. Autocompletar también utilizarse para rellenar la información pertinente, tales como entrada el nombre de una ciudad para obtener el código postal de la ciudad.
Usted puede obtener de una fuente de datos de origen local o remoto: la fuente local para pequeños conjuntos de datos, por ejemplo, una libreta de direcciones con 50 entradas; fuente remota para grandes conjuntos de datos, por ejemplo, con cientos o miles entradas de base de datos. Para obtener más información acerca de la fuente de datos personalizada, consulte la source
opciones de documentos.
interacción con el teclado
Cuando el menú está abierto, los siguientes comandos del teclado:
- UP - Mover el cursor al elemento anterior. Si en el primer elemento, y luego mover el foco a la entrada (input). Si la entrada (input), el foco se desplazará al último elemento.
- ABAJO - para mover el enfoque al siguiente elemento. Si el último elemento, a continuación, mover el foco a la entrada (input). Si la entrada (input), el foco se desplazará al primer elemento.
- ESCAPE - fuera del menú.
- ENTER - Seleccionar el proyecto actual tiene el foco, y cerrar el menú.
- TAB - a seleccionar el enfoque actual del proyecto, cerrar el menú, y mover el foco a los elementos próximos enfocable (enfocable).
- PÁGINA ARRIBA / ABAJO - Desplazarse una pantalla de proyectos (en base a la altura del menú).
Cuando se cierra el menú, los siguientes comandos del teclado:
- ARRIBA / ABAJO - si cumplen con
minLength
, a continuación, abra el menú.
tematización
miembro de Autocompletar (Autocompletar Widget) usando framework jQuery UI CSS para definir la apariencia de su estilo. Si necesita utilizar el estilo miembro de Autocompletar designado, puede utilizar el siguiente nombre de clase CSS:
-
ui-autocomplete
: para que coincida con la pantalla del usuario menú (menú) -
ui-autocomplete-input
: componente de autocompletar (Autocompletar Widget) Ejemplos de elementos de entrada.
confiar
- IU núcleo (Core interfaz de usuario)
- Biblioteca de componentes (Widget Factory)
- Ubicación (Posición)
- componente de menú (menú de widgets)
información adicional
- La parte funcional requiere un poco de CSS, de lo contrario no funcionará. Si crea un tema personalizado, utilice el archivo CSS widget de especificado como un punto de partida.
- Los componentes para manipular mediante programación el valor del elemento, de modo que cuando el valor de los cambios de elementos no desencadenan la nativas
change
eventos.
La navegación rápida
选项 | 方法 | 扩展点 | 事件 |
---|---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 ) {} ); |
Ejemplos
Ejemplo 1:Un simple auto-completado jQuery UI (Autocompletar).
<! DOCTYPE html> <Html lang = "es"> <Head> <Charset Meta = "UTF-8"> <Título> miembro de Autocompletar (Autocompletar Widget) Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Head> <Cuerpo> <Label for = "autocompletar"> seleccione un lenguaje de programación: </ label> <Entrada id = "autocompletar"> <Script> $ ( "#autocomplete") .autocomplete ({ fuente: [ "C ++", "java", "php", "ColdFusion", "javascript", "asp", "rubí"] }); </ Script> </ Body> </ Html>Ejemplo 2:
Empezar a utilizar la corrección de origen personalizado para que coincida con las condiciones.
<! DOCTYPE html> <Html lang = "es"> <Head> <Charset Meta = "UTF-8"> <Título> miembro de Autocompletar (Autocompletar Widget) Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Head> <Cuerpo> <Label for = "autocompletar"> seleccione un lenguaje de programación: </ label> <Entrada id = "autocompletar"> <Script> Etiquetas var = [ "C ++", "java", "PHP", "ColdFusion", "javascript", "asp", "rubí"]; $ ( "#autocomplete") .autocomplete ({ fuente: function (petición y respuesta) { var matcher = new RegExp ( "^" + $ .ui.autocomplete.escapeRegex (request.term), "i"); respuesta ($ .grep (etiquetas, función (elemento) { volver matcher.test (punto); })); } }); </ Script> </ Body> </ Html>