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





query: string

The value of the current query string

callback: Function

A callback function to trigger when the tab is changed

rgx: RegExp

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

_inputSelector: string

The CSS selector used to target the tab navigation element

_input: HTMLElement

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

_contentSelector: string

The CSS selector used to target the tab content element

_content: HTMLElement

A reference to the HTML container element of the tab content

_filter: Function

A debounced function which applies the search filtering

OPERATORS: Readonly<{
    EQUALS: "equals";
    CONTAINS: "contains";
    STARTS_WITH: "starts_with";
    ENDS_WITH: "ends_with";
    LESS_THAN: "lt";
    LESS_THAN_EQUAL: "lte";
    GREATER_THAN: "gt";
    BETWEEN: "between";
    IS_EMPTY: "is_empty";
}> = ...

The allowed Filter Operators which can be used to define a search filter

Type declaration

  • EQUALS: "equals"
  • CONTAINS: "contains"
  • STARTS_WITH: "starts_with"
  • ENDS_WITH: "ends_with"
  • LESS_THAN: "lt"
  • LESS_THAN_EQUAL: "lte"
  • GREATER_THAN: "gt"
  • BETWEEN: "between"
  • IS_EMPTY: "is_empty"


  • Bind the SearchFilter controller to an HTML application


    • html: HTMLElement

    Returns void

  • Perform a filtering of the content by invoking the callback function


    • event: KeyboardEvent

      The triggering keyboard event

    • query: string

      The input search string

    Returns void

  • Test whether a given object matches a provided filter


    • obj: any

      An object to test against

    • filter: FieldFilter

      The filter to test

    Returns boolean

    Whether the object matches the filter