SearchFilter

SearchFilter

A controller class for managing a text input widget that filters the contents of some other UI element

Constructor

new SearchFilter(options)

See:
Parameters:
Name Type Description
options object

Options which customize the behavior of the filter

Properties
Name Type Attributes Default Description
inputSelector string

The CSS selector used to target the text input element.
contentSelector string

The CSS selector used to target the content container for these tabs.
callback function

A callback function which executes when the filter changes.
initial string <optional>

The initial value of the search query.
delay number <optional>
 100

The number of milliseconds to wait for text input before processing.

Members

_content :HTMLElement|null

A reference to the HTML container element of the tab content

Type:
  • HTMLElement | null

_contentSelector :string

The CSS selector used to target the tab content element

Type:
  • string

_filter :function

A debounced function which applies the search filtering

Type:
  • function

_input :HTMLElement|null

A reference to the HTML navigation element the tab controller is bound to

Type:
  • HTMLElement | null

_inputSelector :string

The CSS selector used to target the tab navigation element

Type:
  • string

callback :function|null

A callback function to trigger when the tab is changed

Type:
  • function | null

query :string

The value of the current query string

Type:
  • string

rgx :RegExp

The regular expression corresponding to the query that should be matched against

Type:

Methods

(static) cleanQuery(query) → {string}

Clean a query term to standardize it for matching. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

Parameters:
Name Type Description
query string

An input string which may contain leading/trailing spaces or diacritics
Returns:

A cleaned string of ASCII characters for comparison

Type
string

bind(html)

Bind the SearchFilter controller to an HTML application

Parameters:
Name Type Description
html HTMLElement

filter(event, query)

Perform a filtering of the content by invoking the callback function

Parameters:
Name Type Description
event KeyboardEvent

The triggering keyboard event
query string

The input search string