Observable Framework 1.5.1 GitHub️ 1.8k

Search input

API · Source · The search input allows freeform, full-text search of a tabular dataset (or a single column of values) using a simple query parser. It is often paired with a table input.

By default, the query is split into terms separated by spaces; each term is then prefix-matched against the property values (the fields) of each row in the data. Try searching for “gen” below to find Gentoo penguins.

const search = view(Inputs.search(penguins, {placeholder: "Search penguins…"}));
search

Or, as a table:

Inputs.table(search)

If you search for multiple terms, such as “gen bis” (for Gentoos on the Biscoe Islands) or “gen fem” (for female Gentoos), every term must match: there’s an implicit logical AND.

If you’d like different search syntax or behavior, pass the filter option. This function is passed the current search query and returns the filter test function to be applied to the data.

Options

Inputs.search(data, options)

The available search input options are:

If a filter function is specified, it is invoked whenever the query changes; the function it returns is then passed each element from data, along with its zero-based index, and should return a truthy value if the given element matches the query. The default filter splits the current query into space-separated tokens and checks that each token matches the beginning of at least one string in the data’s columns, case-insensitive. For example, the query [hello world] will match the string “Worldwide Hello Services” but not “hello”.