вторник, 22 мая 2012 г.

Поиск в очень длинном дропдауне

Недавно передо мной встала задача сделать поиск в очень длинных списках с множественным выбором (дропдаунах). Заказчику показалось невозможным найти нужные позиции среди более чем 5 тысяч наименований.
Я искала решение в интернете и нашла несколько вариантов. Все они сильно грузили процессор на больших списках, некоторые не давали возможности выбирать из списка вручную, и обладали еще кучей различных маленьких и не очень недостатков.
Все, кроме одного...
Почти гениальный в своем роде коротенький и легкий скрипт (не забудьте подключить jQuery):

Без множественного выбора:
<script type="text/javascript">
$(document).ready(function() {
$('#searchProduct').keyup(function() {
if ($('#searchProduct').val().length >= 3) { //search only after 3 chars are entered.
search = $('#searchProduct').val();
$('#selectProduct option').each(function(){
if ($(this).text().indexOf(search) > -1) {
$(this).attr('selected', 'yes');
}
});
}
});
});
</script>
<input type="text" size="20" id="searchProduct" value="" name="search">
<select id="selectProduct" name="whatever">
  <option value="1">-options here-</option>
  .....
</select>

Для списка с множественным выбором:
<script type="text/javascript">
$(document).ready(function() {
$('#searchProduct2').keyup(function() {
if ($('#searchProduct2').val().length >= 3) {
search = $('#searchProduct2').val();
$('#selectProduct2 option:selected').each(function(id){
$(this).removeAttr('selected');
});
$('#selectProduct2 option').each(function(){
if ($(this).text().indexOf(search) > -1) {
$(this).attr('selected', 'yes');
}
});
}
});
});
</script>

<input type="text" size="20" id="searchProduct2" value="" name="search">
<select id="selectProduct2" name="current_products[]" multiple="yes" size="10">
  <option value="1">-options here-</option>
  .....
</select>

И, наконец, последняя версия скрипта, усовершенствованная мной - теперь поиск ведется без учета регистра и выводит сообщение о количестве найденных результатов:
<script type="text/javascript">
$(document).ready(function() {
$('#searchProduct2').keyup(function() {
var n = "0";
if ($('#searchProduct2').val().length >= 3) {
search = $('#searchProduct2').val();
$('#selectProduct2 option:selected').each(function(id){
$(this).removeAttr('selected');
});
$('#selectProduct2 option').each(function(){
if ($(this).text().toLowerCase().indexOf(search.toLowerCase()) > -1) {
$(this).attr('selected', 'yes');
}
});
n = $('#select-all-supplier option:selected').length;
if(n == 0){
$("span.results").empty();
$("span.results").fadeIn().append("Ничего не найдено");
}else{
$("span.results").empty();
$("span.results").fadeIn().append("Результатов: "+n+".");
}
return false;
}
if ($('#searchProduct2').val().length == 0) {
$("span.results").empty();
}
});
});
</script>

<input type="text" size="20" id="searchProduct2" value="" name="search"> <span class="results"></span>
<select id="selectProduct2" name="current_products[]" multiple="yes" size="10">
  <option value="1">-options here-</option>
  .....
</select>

P.S. Работающий пример приводить не буду - кому надо, тот воспользуется. Всё так, потому что этот блог по бОльшей части является заметками для себя.

Комментариев нет:

Отправить комментарий