Observable Framework Input — Search

Observable Framework documentation: Input: Search Source: https://observablehq.com/framework/input-search

<a href="https://github.com/observablehq/inputs/blob/main/README.md#search">API</a> · <a href="https://github.com/observablehq/inputs/blob/main/src/search.js">Source</a> · 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 searchInput = Inputs.search(penguins, {placeholder: "Search penguins…"});
const search = view(searchInput);

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

search

Or, as a table:

Inputs.table(search)

for (const abbr of document.querySelectorAll("abbr")) {
  abbr.title = `Search for “${abbr.textContent}”`;
  abbr.style.cursor = "default";
  abbr.onclick = () => {
    const input = searchInput.querySelector("input");
    input.value = abbr.textContent;
    input.dispatchEvent(new Event("input", {bubbles: true}));
  };
}

If you search for multiple terms, such as “<abbr>gen bis</abbr>” (for Gentoos on the Biscoe Islands) or “<abbr>gen fem</abbr>” (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:

• label - a label; either a string or an HTML element
• query - the initial search terms; defaults to the empty string
• placeholder - a placeholder string for when the query is empty
• columns - an array of columns to search; defaults to data.columns
• locale - the current locale; defaults to English
• format - a function to show the number of results
• spellcheck - whether to activate the browser’s spell-checker
• autocomplete - the autocomplete attribute, as text or boolean
• autocapitalize - the autocapitalize attribute, as text or boolean
• filter - the filter factory: a function that receives the query and returns a filter
• width - the width of the input (not including the label)
• datalist - an iterable of suggested values
• disabled - whether input is disabled; defaults to false
• required - if true, the search’s value is all data if no query; defaults to true

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