CODEWITHSUNDEEP
javascriptjqueryangularjs
user7118434
user7118434

Reputation:

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

Upvotes: 0

Views: 1983

Answers (6)

prasanth
prasanth

Reputation: 22500

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>

Upvotes: 4

Sreekanth
Sreekanth

Reputation: 3130

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>

Upvotes: 1

Abhishek Dhanraj Shahdeo
Abhishek Dhanraj Shahdeo

Reputation: 1356

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

Upvotes: 0

Geeky
Geeky

Reputation: 7498

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

Upvotes: 4

Rax Weber
Rax Weber

Reputation: 3780

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

Upvotes: 0

Jayanti Lal
Jayanti Lal

Reputation: 1185

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

Upvotes: -1

Related Questions