0

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();
});
Sylnois
  • 1,589
  • 6
  • 23
  • 47

2 Answers2

2

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

Community
  • 1
  • 1
Kiran
  • 20,167
  • 11
  • 67
  • 99
  • Wow, almost perfect.. just one little issue. When I enter for example `upl `, then it shows all of the question. I think it's because he's filtering the blank space too. – Sylnois Sep 18 '13 at 14:29
  • I couldn't able to replicate in fiddle. could you check once in fiddle? – Kiran Sep 18 '13 at 14:31
  • It's working in the fiddle.. I really just copied the code like a newbie and paste it in my script. I just found out when I type `upl ` the split function makes 2 array values. – Sylnois Sep 18 '13 at 14:37
  • Got it. I just put this before the `:contains` selector: `if(sSearch[i])`. – Sylnois Sep 18 '13 at 14:40
1

Try this

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

DEMO

For case sensitive take a look at this

Community
  • 1
  • 1
Anton
  • 32,245
  • 5
  • 44
  • 54