Custom Search Using Client Side Code

Functionality Overview

The Custom Search functionality is achieved through JS. Search produces live results for each key press. This search can be used to filter the data table or HTML table data dynamically, based on the keywords entered. The below code explains the search for HTML table. 

Step 1

Fetch the SharePoint list and store it in an HTML table. The SharePoint list has to be fetched using JavaScript code and stored in an HTML table.

JavaScript

Step 2

Create a HTML search box to get the input keywords.

  1. <div class="searchBox">  
  2.     <input type="text" class="searchTextBox" id="searchTextBoxid" onkeyup="search()"   placeholder="Search..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search...'"/>  
  3.   
  4.     <label id="NotExist" style="display:none"></label> //This label is hidden and used to show a message “Does not exist!” below the search box if searched keyword is not available  
  5. </div>  
JavaScript

The onkeyup event is there to capture the typed-in keyword for search and so, in the HTML, the function search() is called for each key press.

Step 3 - Search JavaScript Function

  1. function search()  
  2. {  
  3.     var input, filter, table, tr, td, i;  
  4.     input = document.getElementById("searchTextBoxid"); //to get typed in keyword  
  5.     filter = input.value.toUpperCase(); //to avoid case sensitive search, if case sensitive search is required then comment this line  
  6.     table =document.getElementById("mainTableid"); //to get the html table  
  7.     tr = table.getElementsByTagName("tr"); //to access rows in the table  
  8.     var countvisble=0; //to hide and show the alert label  
  9.     // Search all table rows, hide those who don't match the search key word  
  10.     for(i=0;i<tr.length;i++)  
  11.     {  
  12.         td=tr[i].getElementsByTagName("td")[0]; //search keyword searched only in 1st column of the table, if you want to search other columns then change [0] to [1] or any required column number  
  13.         if(td)  
  14.         {  
  15.             if(td.innerHTML.toUpperCase().indexOf(filter)>-1)  
  16.             {  
  17.                 countvisble++;  
  18.                 tr[i].style.display="";  
  19.                 document.getElementById("NotExist").style.display = "none";  
  20.             }  
  21.             else  
  22.             {  
  23.                 tr[i].style.display = "none";  
  24.                 document.getElementById("NotExist").style.display = "none";  
  25.             }  
  26.         }  
  27.     }  
  28.     if(countvisble==0) //displays the alert message label  
  29.     {  
  30.         document.getElementById("NotExist").style.display = "Block";  
  31.         document.getElementById("NotExist").innerHTML = "Does not exist!";  
  32.     }  
  33. }  

Step 4 - Implement the search in the required page

Add the search box HTML code in your page and add the required CSS for the search box style.

JavaScript

Step 5 - Search Demo Results

The table content changes based on the keyword typed; only those items that match the typed keyword will get displayed in the HTML table and other rows get hidden.

From the list of 8 items, on typing the keyword “k”, the data gets filtered dynamically and the HTML table shows only 2 items that have the keyword.

JavaScript

For the keyword “ka”, the existing 2 items get filtered and only one item that matched the keyword gets displayed dynamically in the HTML table.

JavaScript

If the typed-in keyword does not match with any of the items in the HTML table, then an alert message will be displayed with the blank table, as shown below.

JavaScript