Input: Search

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

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

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

search

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}));
  };
}

Options

• 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