Make any table or list searchable by adding a js-searchable class to a div containing a ul or table. It will automatically add the required search field above the table.

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

Programme Home/EU Overseas
Green Chemistry & Sustainable Industrial Technology (PG Diploma) £4,830 £14,390
Safety Critical Systems Engineering (MSc) £17,420 £19,500

Mathematical Finance (MSc)

The fees for the MSc in Mathematical Finance (Online) vary, please refer to the Online/Distance tab.

£18,060 £23,490
Postgraduate Diploma in Women's Studies (Social Research) £4,830 £11,360

Example using data-header

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

Programme Home/EU Overseas
Green Chemistry & Sustainable Industrial Technology (PG Diploma) £4,830 £14,390
Safety Critical Systems Engineering (MSc) £17,420 £19,500

Mathematical Finance (MSc)

The fees for the MSc in Mathematical Finance (Online) vary, please refer to the Online/Distance tab.

£18,060 £23,490
Postgraduate Diploma in Women's Studies (Social Research) £4,830 £11,360

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".

Programme Home/EU Overseas
Green Chemistry & Sustainable Industrial Technology (PG Diploma) £4,830 £14,390
Safety Critical Systems Engineering (MSc) £17,420 £19,500

Mathematical Finance (MSc)

The fees for the MSc in Mathematical Finance (Online) vary, please refer to the Online/Distance tab.

£18,060 £23,490
Postgraduate Diploma in Women's Studies (Social Research) £4,830 £11,360

Example using data-case-sensitive

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

Programme Home/EU Overseas
Green Chemistry & Sustainable Industrial Technology (PG Diploma) £4,830 £14,390
Safety Critical Systems Engineering (MSc) £17,420 £19,500

Mathematical Finance (MSc)

The fees for the MSc in Mathematical Finance (Online) vary, please refer to the Online/Distance tab.

£18,060 £23,490
Postgraduate Diploma in Women's Studies (Social Research) £4,830 £11,360

Example using everything

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

Programme Home/EU Overseas
Green Chemistry & Sustainable Industrial Technology (PG Diploma) £4,830 £14,390
Safety Critical Systems Engineering (MSc) £17,420 £19,500

Mathematical Finance (MSc)

The fees for the MSc in Mathematical Finance (Online) vary, please refer to the Online/Distance tab.

£18,060 £23,490
Postgraduate Diploma in Women's Studies (Social Research) £4,830 £11,360

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.