How To Implement Search Using JavaScript Function

Last week I was working on a report and the need was to have search field from where user can search the product names out of hundreds of products. I then searched on Google a lot, there were some JQuery plugins coming up that fulfill the requirements but I don’t want to use any JQuery plugin because when we add JQuery files on page it increases the size of the page so I need a small & light function to do the job. After so much searching in Google I found a function in JavaScript that did an awesome job. I thought to share it with all of you as it is very helpful.

Let’s try to understand with the help of an example. I’ve made a table with id=”example” inside a div and place a text box with id=”txtSearch”. I’ve written a searchFunction on keyup event on this text box and passed table id i.e. ‘example’ in my case as second parameter and ‘0’ as third parameter. ‘0’ is cell index on which you want to implement search. So in this case search function will work on first cell.

<div style="font-size: 14px; padding: 15px;">
       <input type="text" id="txtSearch" onkeyup="searchFunction(this,'example',0);" />
            <table id="example" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th style="text-align: left">Name</th>
                        <th style="text-align: left">Position</th>
                        <th style="text-align: left">Office</th>
                        <th style="text-align: left">Age</th>
                        <th style="text-align: left">Start date</th>
                        <th style="text-align: left">Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>2012/03/29</td>
                        <td>$433,060</td>
                    </tr>                                     

                </tbody>
            </table>

        </div>

The search function is getting the string written in search text box as first parameter, _id of the table as second parameter and table cell ‘cellNr’ (on which you want to implement search filter) as third parameter. It gets the search string and loop on the table rows and in the loop JavaScript indexOf function is used to check whether the searching string exist in the first cell of the table or not. If it is not in the row set its display property to none and if it is there just set its display property to empty/blank to show it.

      function searchFunction(term, _id, cellNr) {
            var searchString = term.value.toLowerCase();
            var table = document.getElementById(_id);
            var ele;
            for (var r = 1; r < table.rows.length; r++) {
                ele = table.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g, "");
                if (ele.toLowerCase().indexOf(searchString) >= 0)
                    table.rows[r].style.display = '';
                else table.rows[r].style.display = 'none';
           }
     }