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

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 и т. Д. Если пользователь введет Fuel найдите первую опцию, содержащую эту строку.

В настоящее время я использую 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 для автозаполнения может быть лучшим вариантом для вас. Вы можете посмотреть предыдущий ответ здесь на SO (пожалуйста, не делайте этого, выберите => преобразование массива, используйте массив или скрипт на стороне сервера).