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

2016-11-07 05:59:06 +00:00
Commented Nov 7, 2016 at 5:59 — void
– void, Commented Nov 7, 2016 at 5:59

Community · Accepted Answer · 2017-05-23 12:09:08Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered Nov 7, 2016 at 6:11

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user7118434 Over a year ago

Hi, instead of $(document).on('input', 'input[type=text]' ) we can use class name search ?

user7118434 Over a year ago

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

prasanth Over a year ago

ya sure , just replace with $(document).on('input', '.search' )

user7118434 Over a year ago

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

prasanth Over a year ago

@John see with updated answer.case sensitive selector was added.

|

Geeky · Accepted Answer · 2016-11-07 06:03:18Z

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 7, 2016 at 6:03

Geeky

7,5142 gold badges28 silver badges52 bronze badges

3 Comments

user7118434 Over a year ago

Thank you for this idea . Could you please make little bit advance so in the feature other can use this answer

user7118434 Over a year ago

It will work if typing Nick not with nick . Also need to check when user type each letter like Angular js .

Geeky Over a year ago

you mean case sensitive?

Sreekanth · Accepted Answer · 2016-11-07 06:37:42Z

1

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>

edited Nov 7, 2016 at 6:37

answered Nov 7, 2016 at 6:25

Sreekanth

3,13014 silver badges22 bronze badges

3 Comments

user7118434 Over a year ago

the main point is , check and display on real time input given

user7118434 Over a year ago

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

Sreekanth Over a year ago

changed the event from change to keyup, it should be fine now.

Rax Weber · Accepted Answer · 2016-11-07 06:02:42Z

0

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

answered Nov 7, 2016 at 6:02

Rax Weber

3,78121 silver badges30 bronze badges

Comments

Abhishek Dhanraj Shahdeo · Accepted Answer · 2016-11-07 06:22:22Z

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

Jayanti Lal · Accepted Answer · 2016-11-07 06:00:06Z

-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 7, 2016 at 6:00

Jayanti Lal

1,1836 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

10 Comments

3 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

10 Comments

3 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related