Jquery search using real time input , like Filter

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

Answer 1

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>

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

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");

Answer 6

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