Как сделать поиск внутри списка select на JS?

Question

[turbomen24]

Мне необходимо сделать поиск внутри списка select, у меня есть скрипт, который это делает, но если я уберу <form> и сделаю это внутри <div>, поиск не работает. Почему так происходит?

<form id="f">
<select name="name_ob" size="6">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="opt">
</form>
<script>
var f = document.getElementById["f"],
    s = f["name_ob"], o = s.querySelectorAll("option"),
    inp = f["opt"],
    reg;
inp.oninput = function() {
    reg = new RegExp(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>

Например, если я заместо <form id="f"> напишу <div id="f">, поиск не выполняется. Пробовал разными способами менять js код, и не смог найти решение.

Comments

[smigles]

Вы не пробовали смотреть ошибки в консоли?

[Steppp]

Первый раз такое вижу! Квадратные скобки! document.getElementById["f"],

Ну если с ними все работает! Хотя может и в них проблемка!

Answer 1

[Роман]

s = f["name_ob"]
Поменяй на s = document.getElementById('name_ob')
и select у дай такой ид.
Обращение идет как к форме, поэтому убрав форму теряешь переменную

inp = f["opt"],
ну и здесь аналогично

Comments

[turbomen24]

Спасибо, это работает.
Если кому-то нужно, вот полный рабочий код, как осуществить поиск по списку select внутри div или любого другого элемента.

<div id="f">
<select id="name_ob" size="6">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="opt">
</div>

<script>
var f = document.getElementById('f'),
    s = document.getElementById('name_ob'), o = s.querySelectorAll("option"),
    inp = document.getElementById('opt'),
    reg;
inp.oninput = function() {
    reg = new RegExp(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>

Answer 2

[Tim]