John John - 1 month ago 12
Javascript Question

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

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

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>