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

Asked
Viewd479

1

У меня есть раскрывающийся список для выбора, который может содержать более 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 на выбор.

Спасибо.

2 ответов

3

Учитывая переменную 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);
});
 
0

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