Jquery search using real time input , like Filter option in Angular JS

Question

how to apply filter option for following html code that will check and display on real time input given.

 <div class="block-parent">
  <input type="text" name="search" class="search">
  <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
  <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
  <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>

 </div>

Example: When user type nick on search box then only <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div> is need to show & other two div is need to hide .Please anyone can suggest a good method .

ie creating a search result like https://docs.angularjs.org/api/ng/filter/filter

What have you done already? Please show us the code. – void Nov 07 '16 at 05:59 — void, Nov 07 '16 at 05:59

score 4 · Answer 1 · answered Nov 07 '16 at 06:03

4

You can check for the div's content using contains and hide/show them respectively

$(function() {
  $("#search").on('change', function(event) {
    var text = $(this).val();
    $('.answer:contains(' + text + ')').show();
    $('.answer:not(:contains(' + text + '))').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-parent">
  <input type="text" name="search" id="search">
  <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
  <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
  <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>

</div>

Hope this helps

answered Nov 07 '16 at 06:03

Geeky

7,420
2
24
50

Thank you for this idea . Could you please make little bit advance so in the feature other can use this answer – Nov 07 '16 at 06:10
It will work if typing Nick not with nick . Also need to check when user type each letter like Angular js . – Nov 07 '16 at 06:11
you mean case sensitive? – Geeky Nov 07 '16 at 06:11

score 4 · Accepted Answer · edited May 23 '17 at 12:09

4

I added with oninput event Its will check and display on real time input given. Case sensitive also.At the time string empty.It wont display anything.Its will search the each letter of containing in result

Update the answer with
Case sensitive select : see the reference

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

$(document).on('input', '.search',function(event) {
    var text = $(this).val();
     $('.answer').hide();
  
    $('.answer:Contains(' + text+ ')').show();

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-parent">
  <input type="text" name="search" class="search">
  <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
  <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
  <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>

</div>

edited May 23 '17 at 12:09

Community

1
1

answered Nov 07 '16 at 06:11

prasanth

22,145
4
29
53

Hi, instead of $(document).on('input', 'input[type=text]' ) we can use class name search ? – Nov 07 '16 at 06:23
1

also on the first page load we need to display all 3 names, also there is no input then also we need to display all names – Nov 07 '16 at 06:25
1

ya sure , just replace with `$(document).on('input', '.search' )` – prasanth Nov 07 '16 at 06:26
yes, very good answer friend . This is the one i expected . A little change also needed .When type n then we need to display both Nick and John since these two name contain n – Nov 07 '16 at 06:34
@John see with updated answer.case sensitive selector was added. – prasanth Nov 07 '16 at 06:44
Really thank you friend . This is the one i expected . if you have time could you write method two in which search result is showing first and followed by other . For example when some one search sam then the order of result is sam,nick,john . – Nov 07 '16 at 06:51
please check this http://stackoverflow.com/questions/40562390/jquery-function-is-not-working-due-to-document-ready – Nov 12 '16 at 12:24
Is there a specific reason you didn't use `$('.answer:not(contains(' + text+ '))').hide();`, instead of hiding all items and then showing the matches? – Meir Cohen Aug 18 '17 at 13:21
@MeirCohen ya..but only hiding function is not satisfied all .because it's not showing after the text box empty check this https://fiddle.jshell.net/vj6qeqLf/ . Check the Op comment his asked to display all the content when empty input. – prasanth Aug 18 '17 at 13:25
@MeirCohen For my concept was First hide then show . – prasanth Aug 18 '17 at 13:31

Sreekanth · Answer 3 · 2016-11-07T06:37:42.563

Building on top of Geeky's code, you could just do a case insensitive : contains selector that can do case insensitive check.

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

$(function() {
  $("#search").on('keyup', function(event) {
    var text = $(this).val().trim();
    if (text === "") {
      $(".answer").show();
    } else {

      $('.answer:caseInsensitiveContains(' + text + ')').show();
      $('.answer:not(:caseInsensitiveContains(' + text + '))').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-parent">
  <input type="text" name="search" id="search">
  <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
  <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
  <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>

</div>

the main point is , check and display on real time input given — , Nov 07 '16 at 06:27
also on the first page load we need to display all 3 names, also there is no input then also we need to display all names — , Nov 07 '16 at 06:28
changed the event from change to keyup, it should be fine now. — Sreekanth, Nov 07 '16 at 06:38

score 0 · Answer 4 · answered Nov 07 '16 at 06:02

0

You can use the jQuery change() method and check the input value, then show or hide the appropriate divs.

answered Nov 07 '16 at 06:02

Rax Weber

3,730
19
30

Abhishek Dhanraj Shahdeo · Answer 5 · 2016-11-07T06:22:22.183

Try this:

$(function() {
    $("#search").on('change', function(event) {
        var text = $(this).val().toLowerCase();
        if(text.length){                
            $('.answer').each(function(){
                if($(this).text().toLowerCase() == text) {
                    $(this).show();
                }
                else $(this).hide();
            })
        } else $('.answer').show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="block-parent">
     <input type="text" name="search" id="search">
     <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
     <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
     <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>
</div>

This will search even when case-insensitive

score -1 · Answer 6 · answered Nov 07 '16 at 06:00

-1

give id to all the div's then try this

then in click event of nick write below code

                $('#div2').css("display", "none");
                $('#div3').css("display", "none");

answered Nov 07 '16 at 06:00

Jayanti Lal

1,175
6
18

Jquery search using real time input , like Filter option in Angular JS

6 Answers6

Linked