JavaScript is the core part of the application that's going to make the filtering possible. Therefore, I am not writing it all at once rather we'll dissect it together to figure out why and how it works.

When you take a look at the HTML form input you will realize an HTML ID is attached to it. Here it is once again:

<!-- I have omitted other attributes of the input to keep things short --><inputtype="text"id="searchInput">

Text entered into this form input will be used as the filter. We'll have to observe changes when a user types in this input and compare it against the data in the table. The best way to do this is to attach an event listener.

In JavaScript, we make use of the addEventListener method to attach an event to an HTML element. It accepts parameters like:

An HTML DOM Event

A function

A boolean value indicating whether to use event bubbling or event capturing

The particular event we'll have to watch out for is the keyupevent because we'll have to make comparisons with the table when the user types.

The function (defined later) describes what happens when the user types.

We'll pass a false value as the third parameter to this function which means the event listener will use event bubbling

// get the form inputletsearchInput=document.getElementById('searchInput');// attach an event listenersearchInput.addEventListener("keyup",filterTable,false);

Next we need to define the function filterTable. We'll start by doing the following:

Get the user input

Select the table

Select all table rows in the selected table

functionfilterTable(){// get the user inputletfilter=searchInput.value.toUpperCase();// grab the tablelettable=document.getElementById("table");// get all table rows in the selected tablelettr=table.getElementsByTagName("tr");}

The getElementsByTagName() used in selecting the tr returns an HTMLCollection, if we are to make any comparison we'll have to loop through the collection.

Before that, we should know that the user will filter the table using the name of the programming language which is inside the first table data (td) of each row.

Therefore, when we perform the loop we'll have to select every first table data in each row:

functionfilterTable(){// previous code remain the samefor(leti=0;i<tr.length;i++){// select every first table data in each rowlettd=tr[i].getElementsByTagName("td")[0];// more to follow}}

Now that we have the table data, we are ready to make a comparison. We check if the user input exists in the table row using the indexOf operator. If it exists we show the user and hide the remaining data in the table. A simple if/else will do the trick:

functionfilterTable(){// previous code remain the samefor(leti=0;i<tr.length;i++){// previous code remain the sameif(td){if(td.innerHTML.toUpperCase().indexOf(filter)>-1){// we found a matchtr[i].style.display="";}else{// no match foundtr[i].style.display="none";}// end of if(td.innerHTML...)}// end of if(td)}// end of for loop }// end of function filterTable()

Here is the whole function:

functionfilterTable(){// get the user inputletfilter=searchInput.value.toUpperCase();// grab the tablelettable=document.getElementById("table");// get all table rows in the selected tablelettr=table.getElementsByTagName("tr");for(leti=0;i<tr.length;i++){// get the first table data of each rowlettd=tr[i].getElementsByTagName("td")[0];if(td){// we got a data to work withif(td.innerHTML.toUpperCase().indexOf(filter)>-1){// we found a match// we show ittr[i].style.display="";}else{// no match found// we hide the table datatr[i].style.display="none";}// end of if (td.innerHTML..)}// end of if (td)}// end of for()}// end of function filterTable()