• Type into the field to search • Use checkboxes to exclude columns
Download
About gridSearch

gridSearch is a pure JavaScript plugin which enables autocomplete-style searching of tabular data. It renders all interface elements in the specified container and uses JSource to query the data for the search terms.

Options are available to enable sorting and define the initial sort order as well as exclude any columns from the search. HTML may be used within table values so event handlers can be attached inline or using the DOM.

Supports all major browsers. See the various demos for more.

How to Use

Include references to JSource.js, gridSearch.js, and gridSearch.css at the top of your page.

<script type="text/javascript" src="JSource/js/JSource.js"></script>
<script type="text/javascript" src="gridSearch/js/gridSearch.js"></script>
<link rel="stylesheet" href="gridSearch/css/gridSearch.css" type="text/css" media="all" />

Assemble the data as you would for a JSource instance and pass it in a object literal along with other configuration options to the gridSearch API. *Important: The creation of a new gridSearch instance must come after the HTML container element on the page. Put the gridSearch code near the bottom of your page to be sure your container element has been rendered prior to initialization. 

<div id="myGridSearch" class="shaded"></div>

<script type="text/javascript">

  var names = [ "Author", "Title", "Genre", "Price", "Publish_Date", "Buy_Now" ];

  var data = [        
    [ "Gambardella, Matthew", "XML Developer's Guide", "Computer", "44.95", "2000-10-01", "<a href='#' onclick='showAlert();'>Add to Cart</a>"  ],
    [ "Ralls, Kim", "Midnight Rain", "Fantasy", "5.95", "2000-12-16", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "Corets, Eva", "Maeve Ascendant", "Fantasy", "5.95", "2000-11-17", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "Corets, Eva", "Oberon's Legacy", "Fantasy", "5.95", "2001-03-10", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "Corets, Eva", "The Sundered Grail", "Fantasy", "5.95", "2001-09-10", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "Randall, Cynthia", "Lover Birds", "Romance", "4.95", "2000-09-02", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "Thurman, Paula", "Splish Splash", "Romance", "4.95", "2000-11-02", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "Knorr, Stefan", "Creepy Crawlies", "Horror", "4.95", "2000-12-06", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "Kress, Peter", "Paradox Lost", "Science Fiction", "6.95", "2000-11-02", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "O'Brien, Tim", "Microsoft .NET: The Programming Bible", "Computer", "36.95", "2000-12-09", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "O'Brien, Tim", "MSXML3: A Comprehensive Guide", "Computer", "36.95", "2000-12-01", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
    [ "Galos, Mike", "Visual Studio 7: A Comprehensive Guide", "Computer", "49.95", "2001-04-16", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ]
  ];

  var opts = { 
    columns: names, 
    rows: data, 
    container: 'myGridSearch', 
    exclude: [ 'Buy_Now' ], 
    sortable: true, 
    defaultSort: 'Price DESC'  
  };

  var gSearch = new gridSearch( opts ); 
  
  function showAlert(){
    alert( 'Item added to cart.' );
  }
  
</script>
Options

Options are passed to the constructor like below:

var opts = { 
  columns: names, 
  rows: data, 
  container: 'myGridSearch', 
  exclude: [ 'Buy_Now' ], 
  sortable: true, 
  defaultSort: 'Price DESC'  
};

var gSearch = new gridSearch( opts );

Complete List of Options

columns: Array of column names which respond to values in rows property. Column names may not contain spaces. Underscore character will be converted to space in results table.
    *Required

    Example Values:

[ "Author", "Title", "Genre", "Price", "Publish_Date", "Buy_Now" ]

rows: Array of arrays representing rows of data.
    *Required

    Example Values:

[[ "Gambardella, Matthew", "XML Developer's Guide", "Computer", "44.95", "2000-10-01", "<a href='#' onclick='showAlert();'>Add to Cart</a>"  ],
 [ "Ralls, Kim", "Midnight Rain", "Fantasy", "5.95", "2000-12-16", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
 [ "Corets, Eva", "Maeve Ascendant", "Fantasy", "5.95", "2000-11-17", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ],
 [ "Corets, Eva", "Oberon's Legacy", "Fantasy", "5.95", "2001-03-10", "<a href='#' onclick='showAlert();'>Add to Cart</a>" ]]

container: DOM id for container element on the page.
    *Required

    Example Value: 'myGridSearch'

exclude: Array of column names to exclude from search. Useful for columns containing HTML.
    Optional

    Example Values: 

[ 'Price', 'Buy_Now' ]

sortable: Displays elements for sorting results within table headers.
    Optional

    Possible Values: true/false
    Default: true

defaultSort: Defines sort order on init.
    Optional

    Example Value: 'Price DESC'

Version History
Version Date Notes
1.0 05/30/13
Initial Release