You can add other options to the list table by using data- attributes.

The simplest version searches list items.

The label of the text field will usually say Search. To change it, add a data-label attribute. See the example here.

By default, the search will look at the text content of every table cell (th or td) in the tbody, and will not search the thead. If you have a header line in the tbody, add the data-header="true" attribute and the search will skip the first row in the table. If you have multiple headers throughout the table you can pass a selector and it will skip any row with that class name. See here.

You can skip columns by passing a data-exclude-cols attribute. This should be a comma-separated list of the column numbers to skip. See the example here. You can do the same with data-include-cols instead if you like.

Lastly, you can set the search to be case-sensitive by adding a data-case-sensitive="true" attribute. Example here.

If the searchable table is shorter than the height of the browser window, the searchable field won't appear.

Use

var m = new SEARCHABLE({
  container: $('#some-id')
});

Example using list

Example using data-label

Example using data-header

By passing data-header="true", the first row of the table is skipped

Example using data-exclude-cols

In this example, we're not interested in searching the second and third columns. By passing a data-exclude-cols="2,3" attribute, we can avoid adding them to the search. You could alternatively use data-include-cols="1".

Example using data-case-sensitive

A case-sensitive search (try _MA_ vs. _ma_).

Example using everything

This search skips the header row, is case sensitive, and skips searching col 3 (Overseas).

Options

• table - a jQuery object, which should be a table or ul element. The script automatically parses for elements with the class .js-searchable.
• label - String, the label for the search box. Defaults to "Search this table".
• header - Boolean, whether the first row of the tbody should be included, or String, the selector of the header rows.
• caseSensitive - Boolean, whether the search is case-sensitive.
• exclude-cols - Array, Array of column numbers (not zero-based) to skip in the search.