如何过滤项目和显示项目

Question

这是我打算做的。假设我有一个名单列表（在DIV中）

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

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

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

我想要一个文本框，用户可以在其中输入“Jenny”，并在其中过滤掉带有“Jenny”的DIV。

什么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

查看:contains() Selector

Answer 3

这样的事情可以解决问题：

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

Answer 4

尽管：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']();
    });
});

这是fiddle