从输入中获取变量并使用它来更改css类

Question

我的输入字段为id="search"。

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

还有一些<div>包含一些文字，例如：

<div id="textblock">Some text here</div>
<div id="textblock">Some other text here</div>
<div id="textblock">Few strokes</div>
<div id="textblock">More words</div>

我需要更改<div>（display:none）的样式，如果<div>有一个用户在旅途中输入字段的文字。

例如，如果输入中的值为＆＃34; stroke＆＃34;，div（或divs）带有单词＆＃34; stroke＆＃34;消失：

<div id="textblock">Some text here</div>
<div id="textblock">Some other text here</div>
<div id="textblock">More words</div>

我一直在寻找一个jQuery解决方案，我找到了一些代码部分，但我不能将它们组合成一个工作部分。我知道我应该使用keyUp()函数，:contains()等。

Answer 1

首先，id属性必须唯一 - 您可能没有多个具有相同ID的元素。相反，您应该使用class属性：

<div class="textblock">Some text here</div>
<div class="textblock">Some other text here</div>
<div class="textblock">Few strokes</div>
<div class="textblock">More words</div>

要进行过滤，您可以使用jQuery's :contains() selector确定哪些.textblock元素包含输入input元素的文字。为此，我使用的blur event handler会在input元素不再具有焦点时触发：

$('#search').on('blur', function() {
    $('.textblock:contains(' + this.value + ')').hide();
});

JSFiddle demo

如果您希望在将内容输入input元素后立即发生这种情况，我们可以使用input事件处理程序，并将:contains()与jQuery's :not() selector结合使用显示以前可能隐藏的元素：

$('#search').on('input', function() {
    $('.textblock:contains(' + this.value + ')').hide();
    $('.textblock:not(:contains(' + this.value + '))').show();
});

JSFiddle demo

正如Dreamonic在comments中所指出的那样，如果您想要处理用户从input元素中移除内容，我们需要确保我们不匹配空输入.textblock内容。我们可以使用trim()：

来完成此操作

$('#search').on('input', function() {
    if (this.value.trim().length > 0) {
        $('.textblock:contains(' + this.value + ')').hide();
        $('.textblock:not(:contains(' + this.value + '))').show();
    }
    else
        $('.textblock').show();
});

JSFiddle demo

Answer 2

您的DOM中的ID应该是唯一的。所以将你的id改为了demo的类。使用.blur()和:contains()。试试这个：

$("#search").blur(function(){
    if($(this).val().length)
        $("div.textblock:contains("+$(this).val()+")").hide();
    else
         $("div.textblock").show();
});

<强> DEMO

Answer 3

 $( "div" ).each(function( index ) {
    if($( this ).text().contains($("#search").text()))
      $(this).hide();
 });

在文本框的模糊事件上尝试上面的代码