Intro

• Highlights search results
• Case-insensitive search
• Works with multiple tables
• Works with or without table header
• Uses plain JavaScript, no dependencies

Demo

How-to

• Download and add reference to tablesearch script
  <script type="text/javascript" src="tablesearch.js">
• Initialize search at the end of HTML table markup or bottom of the page
  new TableSearch(searchBoxId, dataTableId [, options]).init();
  
• Parameters:
  
  • searchBoxId: Mandatory. Id of the search text box.
    
  • dataTableId: Mandatory. Id of the table to search in.
    
  • options: Optional. Search settings.
    
    • firstRowHeader: Whether to treat first row as header. True/false. Default is true.
    • highlightCss: CSS class name for search highlights. Uses yellow color by default.
    • noResultsText: Message to show if no results are found. Message is turned off by default.

Example

<input type="text" id="txtSearch" />
<table id="tblTarget" />

<script type="text/javascript">
   new TableSearch('txtSearch', 'tblTarget', { noResultsText: 'Nothing found!' }).init();
</script>

Or

<input type="text" id="txtSearch" />
<table id="tblTarget" />

<input type="text" id="txtSearch1" />
<table id="tblTarget1" />

<script type="text/javascript">
   new TableSearch('txtSearch', 'tblTarget', { noResultsText: 'Nothing found!' }).init();
   new TableSearch('txtSearch1', 'tblTarget1', { highlightCss: 'highlight_class' }).init();
</script>