Показать/скрыть большое колличество option внутри select
Нужно реализовать фильтр в select по первой букве с помощью стандартных кнопок.
Сделал так:
function onShowBlock(id) {
$("select[name='group_id'] option").removeAttr("selected");
$("select[name='group_id'] option[class='show']").removeClass('show').wrap(document.createElement("span")).parent().hide();
$("select[name='group_id'] option[id="+id+"]").addClass('show').unwrap();
}
<p>Фильтр по первой букве:</p> <p><input type="button" id="l" onclick="onShowBlock(this.id);" value="L"> <input type="button" id="i" onclick="onShowBlock(this.id);" value="I"> <input type="button" id="d" onclick="onShowBlock(this.id);" value="D"> <input type="button" id="s" onclick="onShowBlock(this.id);" value="S"></p> <p>select</p> <select name="group_id" size="1" > <option> </option> <option id="l" class="show" value="lorem">Lorem</option> <option id="d" class="show" value="dolor">Dolor</option> <option id="i" class="show" value="ipsum">Ipsum</option> <option id="s" class="show" value="sit">Sit amet</option> <option id="l" class="show" value="lorem">Lorem1</option> <option id="d" class="show" value="dolor">Dolor1</option> <option id="i" class="show" value="ipsum">Ipsum1</option> <option id="s" class="show" value="sit">Sit amet1</option> <option id="l" class="show" value="lorem">Lorem2</option> <option id="d" class="show" value="dolor">Dolor2</option> <option id="i" class="show" value="ipsum">Ipsum2</option> <option id="s" class="show" value="sit">Sit amet2</option> </select> Все работает, но когда внутри select несколько тысяч option изрядно тормозит и вешает браузер. Может через массивы будет быстрее, но я с js познакомился на прошлой неделе, а то что выше написал по подсказкам гугла. |
game_Racer,
Готовый вариант не подойдет ? Есть отличный плагин chosen, с возможностью автокомплита (самый первый пример на странице). |
В первую очередь нужно понимать что $ - это функция, а не какая-то магия.
Цитата:
Нужно также понимать что каждый id должен быть уникальным.
<p id="filter">
<input type="button" value="l">
<input type="button" value="i">
<input type="button" value="d">
<input type="button" value="s">
</p>
<p>select</p>
<select id="select" name="group_id" size="10" >
<option> </option>
<option value="lorem">Lorem</option>
<option value="dolor">Dolor</option>
<option value="ipsum">Ipsum</option>
<option value="sit">Sit amet</option>
<option value="lorem">Lorem1</option>
<option value="dolor">Dolor1</option>
<option value="ipsum">Ipsum1</option>
<option value="sit">Sit amet1</option>
<option value="lorem">Lorem2</option>
<option value="dolor">Dolor2</option>
<option value="ipsum">Ipsum2</option>
<option value="sit">Sit amet2</option>
</select>
<script>
(function(){
var select = document.getElementById('select');
var removed = [];
function filterOptions(startsWith) {
if (removed.length) {
for (var i = removed.length - 1; i >= 0; i--) {
select.insertBefore(removed[i][0], select[removed[i][1]]);
}
}
for (var i = 1, option; option = select[i]; i++) {
if (option.value[0] !== startsWith) {
removed.push([option.parentNode.removeChild(option), i]);
i--;
}
}
}
var filter = document.getElementById('filter');
var onclick = function() { filterOptions(this.value) };
for (var i = 0, button; button = filter.children[i]; i++) {
button.onclick = onclick;
}
})()
</script>
|
danik.js,
Большое Спасибо. В спаны гугл посоветовал обернуть, так как оптион просто так скрывается не во всех браузерах. |
danik.js,
Начал разбираться в коде.. Возникла пара вопросов. Почему нельзя один раз загнать все оптион в массив и выводить только нужные, предварительно удалив оставшиеся? Зачем сначала возвращать все, а потом удалять лишнее? С Вашим кодом первое нажатие на кнопку срабатывает быстро, а вот следующие нажатие на другие кнопки заставляют браузер подвиснуть. |
| Часовой пояс GMT +3, время: 02:07. |