Category
Home › Blogs › soel's blog

jQuery: поиск в списках (дропдаунах)

Tue, 27/07/2010 - 15:12 — soel

Недавно меня попросили сделать поиск в длинных списках (дропдаунах). Заказчик устал каждый раз искать нужный продукт в длинном списке.
Я пытался найти решение в интернете и нашел как минимум два симпатичных. Но одно очень сильно грузит процессор на больших списках (а спрашивается, зачем оно нужно на маленьких?) а второй не дает выбирать из списка вручную.
Так что закончилось всё простым но действенным решением задачи

(не забудьте подключить 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>

search:

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <em> <strong> <cite> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

CAPTCHA
Это простая проверка на то, что со мной общается человек, а не глупая машина. Умные машины тоже не приветствуются :)
Image CAPTCHA
Enter the characters shown in the image.

Contact author

RSS, XHTML, CSS

© 2008-2009. Konstantin Artemov