Utilice el autocompletado HTML5 (datalist) con el enfoque ‘contains’, no solo ‘starts with’

(No puedo encontrarlo, pero una vez más, realmente no sé cómo buscarlo).

Quiero utilizar y para obtener la autocompletación, PERO deseo que el navegador coincida con todas las opciones mediante el método ‘contains’, en lugar de ‘starts with’, que parece ser estándar. ¿Hay alguna manera?

Si no es simplemente, ¿hay alguna manera de forzar las sugerencias que quiero mostrar, no aquellas que coinciden con el navegador? Digamos que estoy escribiendo “foo” y quiero mostrar las opciones “bar” y “baz”. ¿Puedo forzar ésos sobre el usuario? Si solo llené el datalist con esos (con JS), el navegador seguirá haciendo su comprobación de ‘inicio con’ y los filtrará.

Quiero el último control sobre CÓMO se muestran las opciones datalist. NO sobre su interfaz de usuario, flexibilidad, accesibilidad, etc., así que no quiero rehacerlo por completo. Ni siquiera sugieras un plugin jQuery.

Si puedo controlar por última vez la validación del elemento, ¿por qué no la autocompletación, ¿verdad?

editar: ahora veo que Firefox usa el enfoque ‘contiene’ … ¿Eso ni siquiera es un estándar? ¿Alguna forma de forzar esto? ¿Podría cambiar el camino de Firefox?

editar: hice esto para ilustrar lo que me gustaría: http://jsfiddle.net/rudiedirkx/r3jbfpxw/

  • Las especificaciones de HTMLWG en [list]
  • Las especificaciones de W3 en datalist
  • Ejemplo de DavidWalsh
  • Resumen de HONGKIAT sobre comportamientos …

enfoque ‘contiene’

Quizás esto es lo que estás buscando (parte 1 de tu pregunta).

Va con la limitación de “comienza con” y cambia cuando se realiza una selección.

 'use strict'; function updateList(that) { if (!that) { return; } var lastValue = that.lastValue, value = that.value, array = [], pos = value.indexOf('|'), start = that.selectionStart, end = that.selectionEnd, options; if (that.options) { options = that.options; } else { options = Object.keys(that.list.options).map(function (option) { return that.list.options[option].value; }); that.options = options; } if (lastValue !== value) { that.list.innerHTML = options.filter(function (a) { return ~a.toLowerCase().indexOf(value.toLowerCase()); }).map(function (a) { return ''; }).join(); updateInput(that); that.lastValue = value; } } function updateInput(that) { if (!that) { return; } var value = that.value, pos = value.indexOf('|'), start = that.selectionStart, end = that.selectionEnd; if (~pos) { value = value.slice(pos + 1); } that.value = value; that.setSelectionRange(start, end); } document.getElementsByTagName('input').browser.addEventListener('keyup', function (e) { updateList(this); }); document.getElementsByTagName('input').browser.addEventListener('input', function (e) { updateInput(this); }); 
    

sin embargo, este hilo se publicó hace aproximadamente 2 años. pero si está leyendo este hilo, quizás necesite verificar una versión más reciente de su navegador:

Especificación actual: https://html.spec.whatwg.org/multipage/forms.html#the-list-attribute

Se recomienda a los agentes de usuario que filtren las sugerencias representadas por el elemento fuente de sugerencias cuando el número de sugerencias sea grande, incluyendo solo las más relevantes (por ejemplo, basadas en la información del usuario hasta el momento). No se define un umbral preciso, pero limitar la lista entre cuatro y siete valores es razonable. Si el filtrado se basa en la entrada del usuario, los agentes de usuario deben usar la coincidencia de subcadenas con la etiqueta y el valor de las sugerencias .

Y cuando se escribió esta publicación, el comportamiento de Firefox (51) y Chrome (56) ya se había modificado para que coincidiera con la especificación.

lo que significa que lo que quieres debería funcionar ahora.

este violín aquí ha resquebrajado lo que estás pidiendo Pero no estoy seguro de cómo hacerlo funcionar sin esta dependencia ya que la interfaz de usuario se ve un poco extraña y fuera de lugar cuando se usa junto con Bootstrap.

  elem.autocomplete({ source: list.children().map(function() { return $(this).text(); }).get()