KrankyCode KrankyCode - 1 year ago 69
HTML Question

Match the checkbox text and show only those based on user input in search field

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

Answer Source

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() ){;

Here is the fiddle -

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download