Как отфильтровать элементы и показать элементы

Question

это то, что я планирую сделать. Предположим, у меня есть список имен (в DIVs)

<div class="person">
Mike Mulky
</div>

<div class="person">
Jenny Sun
</div>

<div class="person">
Jack Kickle
</div>

Мне бы хотелось текстовое поле, в котором пользователь может напечатать "Jenny" и отфильтровать DIV с "Jenny" в них.

Какой плагин JQuery позволяет мне это делать? Или, если вы знаете что-то проще :) Спасибо.

Answer 1

Это должно сделать это:

<input type="text" id="userInput" />

<script type="text/javascript">
$('#userInput').keypress(function(){
    $('div.person').hide().filter(':contains("'+this.value+'")').show();
});
</script>

Answer 2

Взгляните на : содержит () селектор

Answer 3

Хотя селектор: contains () может делать именно то, что вы хотите, вам может потребоваться (в некоторых сценариях) сопоставить therm с немного более точным контролем зерна (без учета регистра, с самого начала и т. Д.).

HTML

<input type="text" id="search" />
<ul id="searchable">
    <li>Anna</li>
    <li>Jenny</li>
    <li>John</li>
    <li>Kyle</li>
</ul>

JQuery

$('#search').on('keyup', function(e) {
    var search = $(this).val().toLowerCase();
    $('#searchable').children().each(function() {
        $(this)[search && $(this).text().toLowerCase().match('^' + search) ? 'show' : 'hide']();
    });
});

Вот скрипка

Answer 4

Примерно так должно получиться:

$('.person).each(function(idx, value) {
  if ($(value).text().match(/Jenny/)) {
     // value now holds the element that contains Jenny
  }
});