Форум

kristow · #1 (**permalink**) 27.05.2015, 15:49

Есть select элемент :

<select name="name_ob">
<option value="214">Nissan</option>
<option value="215">Toyota</option>
<option value="40">Новооскольский филиал</option>
<option value="42">НоваяФирма</option>
<option value="92">Агрохолдинг какой-то</option>
<option value="93">Агрохолдинг другой</option>
</SELECT>

Это я привел пример короткий, реально у меня он ~50 строк.
Хочется чтобы при вводе части текста выполнялась фильтрация этого селекта, и в выпадающем окне видеть только совпавшие результаты, для дальнейшего быстрого выбора нужной строки.

Подскажите как такое можно сделать!

рони · #2 (**permalink**) 27.05.2015, 17:23

kristow,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<form action="http://" name="f">
<select name="name_ob" size="6">
<option value="214">Nissan</option>
<option value="215">Toyota</option>
<option value="40">Новооскольский филиал</option>
<option value="42">НоваяФирма</option>
<option value="92">Агрохолдинг какой-то</option>
<option value="93">Агрохолдинг другой</option>
</select>
<input type="text" name="opt">
<p></p>
</form>
<script>
var f = document.forms["f"],
    s = f["name_ob"], o = s.querySelectorAll("option"),
    inp = f["opt"],
    reg;
inp.oninput = function() {
    reg = new RegExp(this.value, "ig");  //если искать только в начале  "^" + this.value, "ig"
    s.options.length = 0;
    for (var i=0; i<o.length; i++)  {
       reg.test(o[i].text) && s.options.add(o[i]);
       reg.lastIndex = 0;
    }
};
</script>
</body>

</html>

kristow · #3 (**permalink**) 28.05.2015, 11:37

Спасибо Рони!
Работает отлично, больше всего радует что ищет по любой части слова

Илья_Яришов · #4 (**permalink**) 01.08.2016, 15:12

Если нужно использовать optgroup, то продолжение тут: html select & optgroup быстрый выбор (правка ошибок)

Форум

Справочник

Discord чат

Курсы javascript