Back to Details

observable-framework-input-search

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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.
js
const searchInput = Inputs.search(penguins, {placeholder: "Search penguins…"});
const search = view(searchInput);
js
const search = view(Inputs.search(penguins, {placeholder: "Search penguins…"}));
js
search
Or, as a table:
js
Inputs.table(search)
js
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.
Observable Framework 文档：输入组件：搜索 来源：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">源码</a> · 搜索输入组件支持使用简单的查询解析器对表格数据集（或单列数据）进行自由格式的全文搜索。它通常与表格输入组件配合使用。
默认情况下，查询内容会被拆分为以空格分隔的多个词；每个词会前缀匹配数据中每一行的属性值（即字段）。试试在下方搜索“gen”来找到巴布亚企鹅（Gentoo penguins）。
js
const searchInput = Inputs.search(penguins, {placeholder: "Search penguins…"});
const search = view(searchInput);
js
const search = view(Inputs.search(penguins, {placeholder: "Search penguins…"}));
js
search
或者，以表格形式展示：
js
Inputs.table(search)
js
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}));
  };
}
如果你搜索多个词，比如“<abbr>gen bis</abbr>”（指代Biscoe群岛的巴布亚企鹅）或“<abbr>gen fem</abbr>”（指代雌性巴布亚企鹅），所有词都必须匹配：这隐含了逻辑“与”的关系。
如果你需要不同的搜索语法或行为，可以传入filter选项。该函数会接收当前的搜索查询，并返回要应用于数据的过滤测试函数。

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”.
Inputs.search(data, options)
可用的搜索输入组件选项如下：
  • label - 标签；可以是字符串或HTML元素
  • query - 初始搜索词；默认为空字符串
  • placeholder - 查询为空时显示的占位符文本
  • columns - 要搜索的列数组；默认为data.columns
  • locale - 当前本地化设置；默认为英文
  • format - 用于显示结果数量的函数
  • spellcheck - 是否启用浏览器的拼写检查器
  • autocomplete - autocomplete 属性，可设置为文本或布尔值
  • autocapitalize - autocapitalize 属性，可设置为文本或布尔值
  • filter - 过滤工厂函数：接收查询内容并返回一个过滤函数
  • width - 输入框的宽度（不包含标签）
  • datalist - 建议值的可迭代对象
  • disabled - 是否禁用输入组件；默认为false
  • required - 如果为true，当没有查询内容时，搜索结果为全部data；默认为true
如果指定了filter函数，每当查询内容变化时就会调用它；它返回的函数会接收data中的每个元素及其从零开始的索引，若该元素匹配查询内容则应返回真值。默认的过滤函数会将当前查询拆分为以空格分隔的多个标记，并检查每个标记是否至少与数据某一列中的字符串开头匹配，且不区分大小写。例如，查询词[hello world]会匹配字符串“Worldwide Hello Services”，但不会匹配“hello”。