Use o preenchimento automático de HTML5 (datalista) com a abordagem ‘contém’, e não apenas ‘começa com’

(Eu não consigo encontrá-lo, mas, novamente, eu realmente não sei como procurar por ele.)

Eu quero usar e para obter o autocompletion, MAS quero que o navegador combine todas as opções pela abordagem ‘contains’, em vez de ‘starts with’, que parece ser padrão. Há algum caminho?

Se não simplesmente, há uma maneira de mostrar sugestões que eu quero mostrar, não aquelas que o navegador encontrou? Digamos que eu esteja digitando “foo” e quero mostrar as opções “bar” e “baz”. Posso forçar isso ao usuário? Se eu preencher o datalist com aqueles (com JS), o navegador ainda fará sua checagem ‘starts with’ e os filtrará.

Eu quero o controle final sobre como as opções de datalist mostram. NÃO sobre sua interface do usuário, flexibilidade, acessibilidade, etc, então eu não quero refazê-lo completamente. Nem mesmo sugira um plugin jQuery.

Se eu puder validar o elemento do formulário de controle final, por que não o autocomplete, certo?

edit: Eu vejo agora que o Firefox usa a abordagem ‘contém’ … Isso não é mesmo um padrão ?? Qualquer maneira de forçar isso? Eu poderia mudar o jeito do Firefox?

edit: Eu fiz isso para ilustrar o que eu gostaria: http://jsfiddle.net/rudiedirkx/r3jbfpxw/

  • As especificações do HTMLWG em [list]
  • datalist do W3 sobre datalist
  • Exemplo DavidWalsh
  • Resumo de HONGKIAT sobre comportamentos ..?

‘contém’ abordagem

Talvez seja isso o que você está procurando (parte 1 da sua pergunta).

Vai com a limitação de “começa com” e muda quando uma seleção é feita.

 '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); }); 
    

ainda este tópico é publicado há cerca de 2 anos. mas se você está lendo este tópico, talvez você precise verificar uma versão mais recente do seu navegador:

Especificação atual: https://html.spec.whatwg.org/multipage/forms.html#the-list-attribute

Os agentes do usuário são encorajados a filtrar as sugestões representadas pelo elemento de fonte de sugestões quando o número de sugestões é grande, incluindo apenas as mais relevantes (por exemplo, com base na input do usuário até o momento). Nenhum limite preciso é definido, mas limitar a lista de quatro a sete valores é razoável. Se a filtragem for baseada na input do usuário, os agentes do usuário devem usar a correspondência de substring no label e no valor das sugestões .

E quando este post foi escrito, o comportamento do Firefox (51) e do Chrome (56) já havia sido alterado para corresponder à especificação.

o que significa que op quer apenas deve funcionar agora.

Este violino aqui quebrou o que você está pedindo Mas não tenho certeza de como fazê-lo funcionar sem essa dependência como a interface do usuário parece um pouco estranho e fora de lugar quando usado junto com o Bootstrap.

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