jQuery:仅显示包含搜索值的内容 [英] jQuery: Show only content which contains search values

问题描述

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

注意:它应与多个搜索输入值一起使用(如示例中:应搜索值upload和login并显示包含该值的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>

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

解决方案

在这里您遇到两个问题.

1. 您需要使用不区分大小写的jQuery:包含选择器.例如:如果您搜索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:包含选择器?

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

演示场

I want to show only divs that contains the entered search values. So if I type upload login in the Searchbox it should show only Question 1 and Question 3.

Note: It should work with multiple search input values(like in the example: should search for value upload AND login and show the divs which contains this values).

Note 2: It should also show Question 1 and Question 3 if the search input is like this: upl log

Note 3: Not case sensitiv. So upload should filter the div(Question 1) with content Upload.

This is what i got:

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

解决方案

Here you have two problems.

1. You need to use case insensitive jQuery :contains selector. For eg: If you search for upload or Upload it should fetch results.

CODE:

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

SOURCE: Is there a case insensitive jQuery :contains selector?

2.Split the search string and parse using .each like:

CODE:

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

这篇关于jQuery:仅显示包含搜索值的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！