Построение быстрого поиска с JQuery

Question

У меня есть следующий код:

<input type="text" id="comboBox" /> 
<ul id="comboBoxData"> 
    <li>1</li> 
    <li>12</li> 
    <li>123</li> 
    <li>1234</li> 
    <li>12345</li> 
    <li>123456</li> 
    <li>1234567</li> 
    <li>12345678</li> 
</ul> 

со следующим кодом JQuery:

$(document).ready(function() { 
    $('#comboBox').bind('keydown keypress keyup change', function() { 
     var search = $('#comboBox').val(); 
     if (search !== '') { 
      $('#comboBoxData li').hide(); 
      $('#comboBoxData li[text*=' + search + ']').show(); 
     } else { 
      $('#comboBoxData li').show(); 
     } 
    }); 
}); 

при вводе текста как «1» или «12» в Поле поиска «comboBox» должно отфильтровывать все LI, текст которых не содержит мои данные поиска, однако по какой-то причине он ничего не отображает. Зачем?

Answer 1

ваш пример не работает, потому что текст не является атрибутом li.

Попробуйте использовать filter() для поиска текста вместо:

$('#comboBox').bind('keydown keypress keyup change', function() { 
    var search = this.value; 
    var $li = $("#comboBoxData li").hide(); 
    $li.filter(function() { 
     return $(this).text().indexOf(search) >= 0; 
    }).show(); 
}); 

Example fiddle

Answer 2

нет text недвижимости для li. вы можете получить text() свойство insted.
InstEd из:

$('#comboBoxData li').hide(); 
$('#comboBoxData li[text*=' + search + ']').show(); 

попробовать

$('#comboBoxData li').each(function(){ 
    if (($this).text().indexOf(search) > -1) $(this).show(); 
    else $(this).hide(); 
}); 

Answer 3

Чтобы найти элемент, который содержит значение от флажка, вы должны перебрать каждый элемент и использовать функцию .text(), чтобы получить текст-содержимое тега:

$('#comboBoxData li').each(function() { 
    if ($(this).text().indexOf(search) != -1) { 
     $(this).show(); 
    } 
}); 

Answer 4

$(document).ready(function() { 
     $("#comboBoxData li").hide(); 

     $('#comboBoxData li').each(function (i) { 
      $(this).attr('data-text', function() { 
       return $(this).text(); 
      }); 
     }); 

     $('#comboBox').bind('change keypress keyup change', function() { 
      $("#comboBoxData li").hide(); 
      $('#comboBoxData li[data-text*="' + $.trim($(this).val()) + '"]').show(); 
     }); 
    });​ 

для живой демонстрации смотрите по этой ссылке: http://jsfiddle.net/nanoquantumtech/B7NxP/