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

我只想显示包含输入的搜索值的div。 因此，如果我在搜索框中键入

upload login

，它应该只显示问题1和问题3

注意：它应该使用多个搜索输入值（如示例中所示：应该搜索值

上传

和

登录

，并显示包含此值的div）

注2：如果搜索输入如下所示，则还应显示问题1和问题3:

upl log

注3：不区分大小写。因此，

upload

应该用内容

upload

过滤div（问题1）

这就是我得到的：

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

试试这个

    $('#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();
});

$（'content div'）。不是（'search block'）。隐藏（）；
$（'#inpSearch'）。在（'keyup'，function（）上{
$（“#content div”）.not（“#搜索块”）.hide（）；
var val=该值；
val=val.split（“”）；
var包含=”；
对于（变量i=0；i0？contains+=“，div”：”；
包含+=”：包含（“+val[i]+”）”；
}
$（'#content div'+contains）.show（）；
});

有关区分大小写的信息，请查看

    $('#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();
});

$（'content div'）。不是（'search block'）。隐藏（）；
$（'#inpSearch'）。在（'keyup'，function（）上{
$（“#content div”）.not（“#搜索块”）.hide（）；
var val=该值；
val=val.split（“”）；
var包含=”；
对于（变量i=0；i0？contains+=“，div”：”；
包含+=”：包含（“+val[i]+”）”；
}
$（'#content div'+contains）.show（）；
});

---

有关区分大小写的信息，请查看这里您有两个问题

您需要使用不区分大小写的jQuery:contains选择器。例如：如果您搜索

上传

或

上传

，它将获取结果

代码：

 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;
           };

    $('#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();
    });
});

资料来源：

2.拆分搜索字符串并使用like解析：

代码：

 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;
           };

    $('#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();
    });
});

---

这里有两个问题

您需要使用不区分大小写的jQuery:contains选择器。例如：如果您搜索

上传

或

上传

，它将获取结果

代码：

 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;
           };

    $('#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();
    });
});

资料来源：

2.拆分搜索字符串并使用like解析：

代码：

 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;
           };

    $('#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();
    });
});

---

@Alvaro为我工作，我使用的是chrome。记住它是区分大小写的，这很奇怪，我不知道为什么，因为它对我来说非常好。我已经在两台不同的计算机上进行了测试，现在可以在30.0.1599.28（Officell版本221063）beta-m和29.0.1547.66（Officell版本220848）mType

fasdfasdfsadfa

上进行测试。你不应该得到任何结果，所有结果都仍然可见。当键入

Upload

并再次删除它时，它也会失败。@Alvaro对我有用，我使用的是chrome。记住它是区分大小写的，这很奇怪，我不知道为什么，因为它对我来说非常好。我已经在两台不同的计算机上进行了测试，现在可以在30.0.1599.28（Officell版本221063）beta-m和29.0.1547.66（Officell版本220848）mType

fasdfasdfsadfa

上进行测试。你不应该得到任何结果，所有结果都仍然可见。当键入

Upload

并再次删除它时，它也会失败。哇，几乎完美了。。只是一个小问题。当我输入例如

upl

时，它会显示所有问题。我想这是因为他也在过滤空白空间，我不能用小提琴来复制。你能检查一下小提琴吗？它在小提琴上工作。。我真的只是像新手一样复制代码，然后粘贴到我的脚本中。我刚发现，当我键入

upl

时，split函数生成2个数组值。明白了。我只是把它放在

：contains

选择器：

if（sSearch[I]）

前面。哇，几乎完美了。。只是一个小问题。当我输入例如

upl

时，它会显示所有问题。我想这是因为他也在过滤空白空间，我不能用小提琴来复制。你能检查一下小提琴吗？它在小提琴上工作。。我真的只是像新手一样复制代码，然后粘贴到我的脚本中。我刚发现，当我键入

upl

时，split函数生成2个数组值。明白了。我只是把它放在

：contains

选择器：

if（sSearch[I]）

之前。