Como faço para mudar o item selecionado em uma lista suspensa com base na entrada do usuário em uma caixa de texto?

Question

Eu tenho uma lista suspensa de seleção que poderia conter mais de 1000 itens para um grande cliente.

<select name="location" id="location">
    <option value="1">Store# 1257</option>
    <option value="2">Store# 1258</option>
    ...
    <option value="973">Store# 8200</option>
    <option value="974">Store# 8250</option>
    <option value="975">Store# 8254</option>
    <option value="976">Store# 8290 Fuel Center</option>
</select>

Eu também tenho uma caixa de texto e quando o usuário digita texto que deseja mover o item selecionado na lista suspensa.

Por exemplo, se o usuário digitar 82, então eu quero passar para o primeiro item na caixa onde um 82 existe o que seria o valor 973. Se o usuário digitar 825, em seguida, passar para 974, etc. Se o usuário digita Combustível , encontrar a primeira opção contendo o texto.

Atualmente, estou usando jQuery como minha biblioteca javascript.

O que você sugere para resolver isso? Devo mudar para um autocomplete? Se assim for eu preciso de algo que tem uma seta de dropdown a lista inteira como alguns clientes podem ter apenas 3 ou 4 para selecionar.

Graças.

Answer 1

Dada uma searchFor variável que contém a seqüência de pesquisa, você pode selecionar a primeira opção que contém o texto com este trecho de jQuery:

$("#location option[text*=" + searchFor + "]:first").attr("selected", true);

Então, se você tem uma entrada de texto com o selectSearchBox id, você poderia escrevê-lo como este:

$("#selectSearchBox").keyup(function () {
     var searchFor = $(this).val();
     $("#location option[text*=" + searchFor + "]:first").attr("selected", true);
});

Answer 2

Usando jQuery autocomplete plug-in pode ser a melhor opção para você. Você pode ter um olhar para a resposta anterior aqui no SO (por favor, não faça isso select tradução => array, use um array ou um script do lado do servidor).