Комментарии 28
Ммм, поиск в нескольких значениях как бы не интересен, а вот если значений сотни, то тогда уже стоит делать автодополнение, которые похоже, но обычно имеет серверную часть что бы не грузить весь список сразу.
+6
Навскидку приходит ещё один вариант:
1. Все option пометить классом 'searchable'.
2. Поиск производить по всем option с классом 'searchable'
3. Все option не соответствующие условию отбора помещать в другой select на котором установлено display:none. Все option соответствующие условию отбора помещать в исходный select.
Вроде бы должно работать. Завтра попробую реализовать в коде… сегодня уже поздновато.
1. Все option пометить классом 'searchable'.
2. Поиск производить по всем option с классом 'searchable'
3. Все option не соответствующие условию отбора помещать в другой select на котором установлено display:none. Все option соответствующие условию отбора помещать в исходный select.
Вроде бы должно работать. Завтра попробую реализовать в коде… сегодня уже поздновато.
+3
Второе что приходит в голову — Wott прав, и стоило бы сделать загрузку данных аяксом с поиском на сервере. Но ситуации бывают всякие, и если так прижало что надо реализовать все на клиенте, то так же стоит обратить внимание на jQuery.data(). Сохраняем все в массиве, очищаем select полностью, обходим сохранённый массив при поиске и наполняем select. Это пожалуй самый правильный вариант. Вечером попробую накидать и этот вариант.
-1
По мне так намудрили, если делать автокомплит то делать его уже реализуя селект на дом элементах типо div ul a. ну а так по моему в селекте и так можно быстро перескочить на нужную букву.
А span внутри select я вам скажу может вызвать неизвестные и не понятные баги, в частности при обновлении браузеров или в каких-то малоизвестных браузерах. Не валидно это значит то что не прописано в стандарте то есть создатели браузеров на это не рассчитывают, и при обновлении браузера или в каком-то сафари юзер возможно не сможет работать с вашим селектом.
А span внутри select я вам скажу может вызвать неизвестные и не понятные баги, в частности при обновлении браузеров или в каких-то малоизвестных браузерах. Не валидно это значит то что не прописано в стандарте то есть создатели браузеров на это не рассчитывают, и при обновлении браузера или в каком-то сафари юзер возможно не сможет работать с вашим селектом.
+1
Где регулярка, я бы вместо $(this).val() написал бы просто this.value
0
я как раз это и предложил, просто реализовать пока не получается, со временем напряженка.
Но на самом деле такие манипуляции будут тяжелее чем сохранить весь список при помощи jQuery.data() и искать уже там.
Но на самом деле такие манипуляции будут тяжелее чем сохранить весь список при помощи jQuery.data() и искать уже там.
0
может я не совсем улавливаю задачу…
Можно же сохранить данные сразу в js массив. Искать по нему. Заполнять select данными из массива согласно критериям.
Я думаю это будет быстрее чем шариться по DOM-у.
Можно же сохранить данные сразу в js массив. Искать по нему. Заполнять select данными из массива согласно критериям.
Я думаю это будет быстрее чем шариться по DOM-у.
+1
все можно :)
Я отвечал в контексте текущей задачи. Здесь проблема скорее всего в том что задача неверно сформулирована. ИМХО самый верный вариант предложили в первом же комментарии.
Варианты с манипуляциями DOM я обдумывал просто ради спортивного интереса :)
Я отвечал в контексте текущей задачи. Здесь проблема скорее всего в том что задача неверно сформулирована. ИМХО самый верный вариант предложили в первом же комментарии.
Варианты с манипуляциями DOM я обдумывал просто ради спортивного интереса :)
0
Ради интереса реализовал вариант с .detach() и .appendTo().
Поменял только скрипт поиска, и добавил один select на страницу:
код скрипта:
Рабочий пример можно посмотреть здесь.
Поменял только скрипт поиска, и добавил один select на страницу:
<select size="10" id="hidden_list" style="display:none;"> </select>
код скрипта:
$('#searchInput').bind('keyup', function() { var q = new RegExp($(this).val(), 'ig'); $('#list, #hidden_list').find('option').each(function(){ if ($(this).text().match(q)){ $(this).parent('#hidden_list').size() ? $(this).detach().appendTo('#list') : null; } else{ $(this).parent('#list').size() ? $(this).detach().appendTo('#hidden_list') : null; } }); });
Рабочий пример можно посмотреть здесь.
+2
Мой поиск по селекту занимает строк 300, с кэшированием и всякими прибаутками. Зачем регулярку юзать? indexOf разве не быстрее? Да и все обязательно нужно обернуть в $, так богаче смотрится :)
-1
Скрывать элементы можно, если вместо select использовать например ul/li, который к тому же стилизуется как угодно. И вы наркоман какой-то, вместо того, чтобы посмотреть интерфейс HTMLSelectElement и использовать нормальные DOM интерфейсы, вроде коллекции options, методов add()/remove(), вы какими-то странными обходными путями выдергиваете отдельные option, и каждый обертываете в jQuery, только ради того, чтобы вызвать у него метод text(). Треш и ужас.
Я никому не советую использовать этот метод, а написать все нормально.
Я никому не советую использовать этот метод, а написать все нормально.
0
bind('keyup' — и right click -> paste идёт лесом.
onchange — и тоже идёт лесом, пока фокус не уйдёт в другое место.
Поэтому надо просто по таймауту раз в 100мс или больше сравнивать #searchInput с oldSearchInput
onchange — и тоже идёт лесом, пока фокус не уйдёт в другое место.
Поэтому надо просто по таймауту раз в 100мс или больше сравнивать #searchInput с oldSearchInput
-1
А не проще и удобней все значения селектов держать в массивчике и исходя из поиска добавлять в селект только нужные элементы (option) из массива?
0
Как-то так. По мне так компактней и удобней =)
var arrElements = [...];
var select = $('#list');
$('#searchInput').bind('keyup', function() {
for (var i = 0; i < arrElements.length; i ++) {
if (-1 !== arrElements[i].indexOf(q)) {
var option = $('<option>').html(arrElements[i]).val(arrElements[i]);
select.append( option );
}
}
});
0
А где добавление в массивчик?
0
Там же где в статье добавление в селект ;) Его можно элементарно сгенерить на сервере в JSON и на клиенте уже появится валидный массив.
0
В таком случае, как минимум надо дописать удаление из селекта.
А пока решение Silver_Clash лучшее.
А пока решение Silver_Clash лучшее.
0
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
Кроссбраузерный поиск в select list