0

I have a search box and many checkbox elements.

Once a user types any text in the search box it should search the checkbox text and show only those checkboxes -- others should be hidden.

Here is the HTML:

<input type="text" value="" name="searchColumn" id="searchColumn"/>

<input type="checkbox" value="column1">column1
<input type="checkbox" value="column2">column2
<input type="checkbox" value="column3">column3
<input type="checkbox" value="column4">column4
<input type="checkbox" value="column5 test">column5 test
<input type="checkbox" value="(column6)">(column6)

Now if the user types the text "col" in the search box all checkboxes should appear as "col" is present in all checkboxes.

If the user types "abc" in the search box, no checkboxes should appear as "abc" is not present in any checkboxes.

If user types text "column1" in search box only one checkbox should appear as "column1" matches only one checkbox.

Just to add another scenario if checkbox name has "column5 test". So if user types string "test" it should show "columnn5 test" checkbox and like to highlight matched text in yellow background.

If user types a special character "(" in search box then "(column6)" checkbox should be shown

3

5 Answers 5

2

Try this :

Html:

<div><input type="checkbox" value="column1">column1</div>
<div><input type="checkbox" value="column2">column2</div>
<div><input type="checkbox" value="column3">column3</div>
<div><input type="checkbox" value="column4">column4</div>
<div><input type="checkbox" value="(column5)">(column5)</div>

jQuery:

$(document).ready(function(){

    $("#searchColumn").on("input",function(){

        var searchTxt = $(this).val();
        searchTxt = searchTxt.replace(/[.()+]/g,"\\$&");

        var patt = new RegExp("^" + searchTxt,"i");

        $(":checkbox").each(function(){

            if(patt.test($(this).val())) 
                $(this).closest("div").show(500);

            else 
                $(this).closest("div").hide(500);

        })
    })
})

Final code :

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            display: inline-block;
        }
    </style>
</head>
    
    <body>
        
        <input type="text" value="" name="searchColumn" id="searchColumn"/>

<div><input type="checkbox" value="column1">column1</div>
<div><input type="checkbox" value="column2">column2</div>
<div><input type="checkbox" value="column3">column3</div>
<div><input type="checkbox" value="column4">column4</div>
<div><input type="checkbox" value="(column5)">(column5)</div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
$(document).ready(function(){
    
    $("#searchColumn").on("input",function(){
        
        var searchTxt = $(this).val();
        searchTxt = searchTxt.replace(/[.()+]/g,"\\$&");

        var patt = new RegExp("^" + searchTxt,"i");
        
        $(":checkbox").each(function(){
            
            if(patt.test($(this).val())) 
                $(this).closest("div").show(500);
                    
            else 
                $(this).closest("div").hide(500);
                    
        })
    })
})
    </script>
    </body>
</html>

5
  • Pretty similar to my solution... +1 for using regex. Does that make it faster? Sep 8, 2016 at 14:16
  • Thanks for the solution. Just to add another scenario how about if checkbox name has "column5 test". So if user types string "test" it should show "columnn5 test" checkbox and like to highlight matched text in yellow background.
    – KrankyCode
    Sep 8, 2016 at 15:01
  • @KrankyCode , if you have "column5 test" checkbox and user type "test" , Should not show checkbox Because checkbox value is "column5 test" and no "test".if my post help you mark it please!
    – Ehsan
    Sep 8, 2016 at 15:09
  • 1
    @KrankyCode that works with my solution see below, if you say "test" it will display accordingly Sep 8, 2016 at 15:11
  • 1
    @KrankyCode , i solve Problem special character "(" . try again.
    – Ehsan
    Sep 8, 2016 at 15:27
0

Simple Jquery solution using Attribute contains selector to match any elements that contains the given string value,

$(document).on("input", "#searchColumn", function(){
    var v = $(this).val();
    var elem = $( "input[value*='"+ v +"']" );
    if(elem.val() ){
      elem.show();
      $(":checkbox").not(elem).hide();
    }else{
        $(":checkbox").hide()
    }
});

Here is the fiddle - https://jsfiddle.net/sq9eknfj/2/

For Case Insensitive search -

   $(document).on("input", "#searchColumn", function(){
        var v = $(this).val();
        var elem = $( ":checkbox" ).filter(function() {
            return (new RegExp(v, 'i')).test(this.value);
        });
        if(elem.val()){
          elem.show();
          $(":checkbox").not(elem).hide();
        }else{
          $(":checkbox").hide()
        }
    });
6
  • Thanks for such a simple and wonderful piece of code. Can you help me with highlighting matched text in yellow background.?
    – KrankyCode
    Sep 8, 2016 at 15:16
  • I'm not sure if you can highlight the text within the input field, but if the text is next to the checkbox like in your question, we can try something out.. Sep 8, 2016 at 15:22
  • Yes, there is text next to checkbox that needs to be highlighted. Matched text needs to be highlighted as user types/keys in text in search box
    – KrankyCode
    Sep 8, 2016 at 15:24
  • @KrankyCode ,This is a wrong solution , Because when you type "um" show all Checkboxs.
    – Ehsan
    Sep 8, 2016 at 15:32
  • @KrankyCode if that's the case then you can use this very simple highlight plugin - johannburkard.de/blog/programming/javascript/… , just chain it within the selection Sep 8, 2016 at 15:35
0

Please try with below code I think it will help you to

$('.my-textbox').keyup(function() {
    var value = $(this).val();
    var exp = new RegExp('^' + value, 'i');
    

    $("input[type='checkbox']").each(function() {
        var isMatch = exp.test($(this).val());
        $(this).parent().toggle(isMatch);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="" class="my-textbox" name="searchColumn" id="searchColumn"/>


<label><input type="checkbox" class="name" value="column1">column1</label>
<label><input type="checkbox" class="name" value="column2">column2</label>
<label><input type="checkbox" class="name" value="column3">column3</label>
<label><input type="checkbox" class="name" value="column4">column4</label>

4
  • short & sweet but not so clear for a beginner to see what is happening Sep 8, 2016 at 14:28
  • @YvonneAburrow with the question I don't find him beginner!!! Sep 8, 2016 at 14:30
  • maybe not but beginners do read this site Sep 8, 2016 at 14:34
  • Do add a bit of explanation along with the code as it helps to understand your code. Code only answers are frowned upon. Sep 8, 2016 at 14:36
0

First you need to change the HTML so as to be able to hide the text and the checkbox.

      <input type="text" value="" name="searchColumn" id="searchColumn"/>
<p>
  <input type="checkbox" class="filter" value="column1">column1
</p>

<p>
  <input type="checkbox" class="filter" value="column2">column2
</p>

<p>
  <input type="checkbox" class="filter" value="column3">column3
</p>

<p>
  <input type="checkbox" class="filter" value="column4">column4
</p>

Then you need a class in your CSS called hidden

.hidden {
  display: none;
}

And here is some jQuery (be sure to include the jQuery library in order to use jQuery):

    $(document).ready(function(){
  $('#searchColumn').keyup(function(){ 
    $('.filter').each(function(){
      if($(this).val() == $('#searchColumn').val()){
        $('.filter').parent().addClass('hidden');
        $(this).parent().removeClass('hidden');
      }
    });

  });
});

Here's a working Plunker. https://embed.plnkr.co/fDzATotA41o9tuxY6vEE/

UPDATED to answer the actual question!

0
0

Here a vanilla JavaScript solution - no jQuery needed:

HTML (you need a wrapper in order to hide the label):

<input type="text" value="" name="searchColumn" id="searchColumn"/>

<div class="checkbox"><input type="checkbox" value="column1">column1</div>
<div class="checkbox"><input type="checkbox" value="column2">column2</div>
<div class="checkbox"><input type="checkbox" value="column3">column3</div>
<div class="checkbox"><input type="checkbox" value="column4">column4</div>

CSS (hiding the checkboxes by default):

.checkbox {
  display:none;
}

JavaScript (listen for input and compare the input value with the values of all the checkboxes):

var checkboxDivs = document.querySelectorAll('.checkbox');

document.querySelector('#searchColumn').addEventListener("input", function(e) {
  var inputValue = e.srcElement.value;
  for (var i = 0; i < checkboxDivs.length; i++) {
    var checkbox = checkboxDivs[i].children[0];
    if (checkbox.value.includes(inputValue) && inputValue.length != 0) {
        checkboxDivs[i].style.display = 'block';
    }   else {
        checkboxDivs[i].style.display = 'none';
    }
  }
}); 

JSFiddle: https://jsfiddle.net/a32nvnka/

1
  • it certainly works very nicely but it reminds me why I love jQuery so much Sep 8, 2016 at 14:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.