Live Search with Multi Select Check Boxes Filters in JavaScript

Pre-Requisites: Used Notepad++ to create HTML file and Apache tom-cat 5.3.0.2

In this blog, we will discuss how to filter values with multiple text boxes on live search in JavaScript.

So for this first, we will take a simple plain HTML and after that, we will add an input type to search as shown in below HTML code.

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Organizations.." title="Type in a name">

So next we need some list of values either from a database or normal list of values as in this we have taken normal values as shown in HTML tags list and in this list only we have to create check box.

HTML Code:

<li><a>

<label class="filter" for="filter1">

<input id="filter1" type="checkbox" name= Organization value="this is located in hyd" />MSN</label>

</a></li>

 

<li><a>

<label class="filter" for="filter1">

<input id="filter2" type="checkbox" name= Organization value="This is located in banglore" />TCS</label>

</a></li>

 

<li><a>

<label class="filter" for="filter1">

<input id="filter3" type="checkbox" name= Organization value="Wipro" />

Wipro</label>

</a></li>

 

<li><a>

<label class="filter" for="filter1">

<input id="filter4" type="checkbox" name= Organization value="Infosys" />

Infosys</label>

</a></li>

Now we have created check boxes for the given filters values. perhaps we need functionality of the filter so in this case we will need below script to search the value in the search box.

Script:

function myFunction() {

var input, filter, ul, li, a, i;

input = document.getElementById("myInput");

filter = input.value.toUpperCase();

ul = document.getElementById("myUL");

li = ul.getElementsByTagName("li");

for (i = 0; i < li.length; i++) {

a = li[i].getElementsByTagName("a")[0];

if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {

li[i].style.display = "";

} else {

li[i].style.display = "none";

}

}

}

Then we have to get the value for multi select check boxes so we will use below code.

$(document).ready(displayCheckbox);

 

function displayCheckbox() {

 

var checkboxes = $("input[type=checkbox]");

 

$.each(checkboxes, function() {

$(this).change(printChecked);

})

 

function printChecked() {

var checkedIds = [];

 

// for each checked checkbox, add it's id to the array of checked ids

checkboxes.each(function() {

if($(this).is(':checked')) {

checkedIds.push($(this).attr('value')+"<br>");

console.log(checkedIds);

}

});

 

// displayField.val(checkedIds);

abc.innerHTML=checkedIds;

}

The Exact output will be shown below.

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download

If you have any queries please get us at support@helicaltech.com

Thank You

Eswar

Helical IT Solutions Pvt Ltd