Combobox (autocompletado)
Un campo de texto con una lista filtrada de sugerencias. El servidor envía un <input list> normal con su <datalist>, que ya funciona en todos los navegadores sin JavaScript. En el init, el componente lo promociona al patrón ARIA de combobox con listbox: renderizado consistente, navegación por teclado, filtrado insensible a los acentos, estado vacío y eventos cancelables. destroy restaura el HTML servido.
<div class="iv-field" style="max-width: 22rem">
<div class="iv-combobox" data-iv-component="combobox">
<label class="iv-label" for="c-country">Country</label>
<input class="iv-input iv-combobox__input" id="c-country" name="country" type="text" list="c-country-options" autocomplete="off" aria-describedby="c-country-help">
<datalist id="c-country-options">
<option value="Austria"></option>
<option value="Croatia"></option>
<option value="Türkiye"></option>
<option value="Denmark"></option>
<option value="Spain"></option>
<option value="Finland"></option>
<option value="France"></option>
<option value="Germany"></option>
<option value="Ireland"></option>
<option value="Netherlands"></option>
<option value="Portugal"></option>
<option value="Sweden"></option>
</datalist>
</div>
<p class="iv-field__help iv-u-m-0" id="c-country-help">Works as a plain <code><datalist></code> without JavaScript; with JavaScript the suggestions become a filtered listbox.</p>
</div>Selección estricta con autoselect
Con strict, el campo solo conserva valores que existen en la lista: el texto libre se revierte al salir del campo y con un segundo Escape. autoselect resalta la primera coincidencia, de modo que Enter o Tab la confirman.
<div class="iv-field" style="max-width: 22rem">
<div class="iv-combobox" data-iv-component="combobox" data-iv-strict="true" data-iv-autoselect="true" data-iv-min-chars="1">
<label class="iv-label" for="c-language">Documentation language</label>
<input class="iv-input iv-combobox__input" id="c-language" name="language" type="text" list="c-language-options" autocomplete="off" aria-describedby="c-language-help">
<datalist id="c-language-options">
<option value="Catalan"></option>
<option value="Dutch"></option>
<option value="English"></option>
<option value="French"></option>
<option value="German"></option>
<option value="Italian"></option>
<option value="Portuguese"></option>
<option value="Spanish"></option>
</datalist>
</div>
<p class="iv-field__help iv-u-m-0" id="c-language-help">Strict mode: the field only keeps a value from the list, so leaving it with text that matches nothing restores the last valid choice.</p>
</div>// data-iv-component="combobox"
{
strict: true,
autoselect: true,
minChars: 1,
}Opciones
| Opción | Atributo | Por defecto | Efecto |
|---|---|---|---|
filter | data-iv-filter | contains | contains o starts; insensible a mayúsculas y acentos. |
minChars | data-iv-min-chars | 0 | Caracteres escritos antes de que la lista se abra mientras escribes (la flecha abajo la abre siempre). |
strict | data-iv-strict | false | Revierte el texto que no coincide con ninguna opción cuando el foco se va. |
autoselect | data-iv-autoselect | false | Resalta la primera coincidencia automáticamente. |
emptyText | data-iv-empty-text | No matches | Texto de la opción deshabilitada que aparece cuando no hay coincidencias. |
Métodos y eventos
open(), close(), select(valueOrOption), clear(), destroy(), isOpen, value (el valor confirmado), optionElements (las filas del listbox) e input. Eventos en el elemento raíz: iv:open/iv:close (cancelables) y después iv:opened/iv:closed; iv:change (cancelable, detail.value, option, previousValue) y después iv:changed cuando se confirma un valor. El campo nativo también recibe eventos sintéticos input y change, así que los formularios y los frameworks que los escuchan siguen funcionando.
Teclado
La flecha abajo abre la lista y mueve el resaltado (con vuelta al principio), la flecha arriba retrocede, Inicio y Fin saltan, Enter confirma la opción resaltada, Escape cierra (un segundo Escape revierte en modo estricto) y Tab confirma el resaltado cuando autoselect está activo y siempre cierra. Al escribir se filtra. El foco nunca sale del campo; la opción resaltada se expone a través de aria-activedescendant.
Sin JavaScript
El <datalist> nativo aporta las sugerencias. El renderizado y el comportamiento de teclado dependen entonces del navegador, pero el campo sigue siendo usable y el formulario envía el valor escrito.
Errores frecuentes
- Usar un combobox para menos de unas seis opciones: un
<select>nativo es más sencillo. - Datos remotos o asíncronos: no están soportados en la v0.2. Renderiza las opciones en el servidor.
- Olvidar la
<label>visible; los placeholders no son etiquetas.