Как изменить выбранный элемент в раскрывающемся списке на основе ввода пользователем в текстовое поле?

Question

У меня есть выпадающее меню, которое может содержать более 1000 предметов для большого клиента.

<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> 

У меня также есть текстовое поле, и когда пользователь вводит в текст Я хочу, чтобы переместить выбранный элемент в раскрывающемся списке.

Например, если пользователь набирает 82, то я хочу перейти к первому элементу в поле, где существует 82, которое будет значением 973. Если пользователь набирает 825, то переходите к 974 и т. Д. Если пользователь вводит Топливо, найдите первый вариант, содержащий эту строку.

В настоящее время я использую jquery как мою библиотеку javascript.

Что вы предлагаете для решения этой проблемы? Должен ли я переключиться на автозаполнение? Если это так, мне нужно что-то, у которого есть стрелка, чтобы вывести весь список, поскольку некоторые клиенты могут выбирать только 3 или 4.

Спасибо.

Answer 1

Учитывая переменной searchFor, который содержит строку поиска, вы можете выбрать первый вариант, который содержит этот текст с этим Jquery сниппета:

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

Так что если у вас есть ввод текста с идентификатором selectSearchBox, вы могли бы напишите так:

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

Answer 2

Использование jQuery autocomplete plugin может быть лучшим вариантом для вас. Вы можете посмотреть предыдущий ответ here на SO (пожалуйста, не делайте этого select => преобразование массива, используйте массив или скрипт на стороне сервера).