jquery - jQuery：仅显示包含搜索值的内容

Question

我只想显示包含输入搜索值的 div。因此，如果我upload login在搜索框中输入，它应该只显示问题 1 和问题 3。

注意：它应该与多个搜索输入值一起使用（如示例中：应该搜索值uploadANDlogin并显示包含此值的 div）。

注 2：如果搜索输入是这样的，它还应该显示问题 1 和问题 3：upl log

注 3：不区分大小写。所以upload应该用 content 过滤 div(Question 1) Upload。

这就是我得到的：

<section id="content">
<div id="search-block">
    <input type="text" id="inpSearch" placeholder="Search.." />
</div>
<div>
    <div class="wrapper">
        <h1>Question 1</h1>
        <p>Harry Markus Upload</p>
    </div>
</div>
<div>
    <div class="wrapper">
        <h1>Question 2</h1>
        <p>Registration Append August Download</p>
    </div>
</div>
<div>
    <div class="wrapper">
        <h1>Question 3</h1>
        <p>Login July Dad</p>
    </div>
</div>

$('#inpSearch').keyup(function(){
    var sSearch = this.value;
    $('section#content > div:not(:first-child)').hide();
    $('section#content > div:contains("' + sSearch + '"):not(:first-child)').show();
});

Answer 1

这里有两个问题。

1. 您需要使用不区分大小写的 jQuery :contains 选择器。例如：如果您搜索upload或Upload它应该获取结果。

代码：

 jQuery.expr[':'].Contains = function(a, i, m) {
             return jQuery(a).text().toUpperCase()
                 .indexOf(m[3].toUpperCase()) >= 0;
           };
           jQuery.expr[':'].contains = function(a, i, m) {
             return jQuery(a).text().toUpperCase()
                 .indexOf(m[3].toUpperCase()) >= 0;
           };

消息来源：是否有不区分大小写的 jQuery :contains 选择器？

2.拆分搜索字符串并使用.each如下解析：

代码：

    $('#inpSearch').keyup(function(){
    var sSearch = this.value;
    sSearch = sSearch.split(" ");
    $('section#content > div:not(:first-child)').hide();
    $.each(sSearch, function(i){
    $('section#content > div:contains("' + sSearch[i] + '"):not(:first-child)').show();
    });
});

DEMO FIDDLE

Answer 2

尝试这个

    $('#content div').not("#search-block").hide();
$('#inpSearch').on('keyup',function(){
    $('#content div').not("#search-block").hide();
    var val = this.value;
    val = val.split(" ");
    var contains="";
    for(var i = 0; i < val.length;i++){
        contains.length >0?contains+=",div":"";
        contains+=":contains('"+val[i]+"')";
    }
    $('#content div'+contains).show();
});

演示

对于区分大小写的，请查看此