html select быстрый выбор
Есть 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 строк. Хочется чтобы при вводе части текста выполнялась фильтрация этого селекта, и в выпадающем окне видеть только совпавшие результаты, для дальнейшего быстрого выбора нужной строки. Подскажите как такое можно сделать! |
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>
|
Спасибо Рони!
Работает отлично, больше всего радует что ищет по любой части слова :victory: |
Если нужно использовать optgroup, то продолжение тут: http://javascript.ru/forum/misc/6428...a-oshibok.html
|
| Часовой пояс GMT +3, время: 17:51. |