Post
Ask Question

Custom Search Using Client Side Code

Functionality Overview

 
The Custom Search functionality is achieved through JS. The search produces live results for each keypress. 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 the 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 on 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
 


Similar Articles