Semantic UI 的搜索组件为在 Web 应用程序中实现搜索功能提供了全面的解决方案。本文档涵盖了搜索组件的结构、行为和自定义选项，包括本地和远程搜索功能。
搜索组件允许用户搜索数据集合并显示匹配的结果。它支持本地数据过滤和基于远程 API 的搜索，并为结果显示和用户交互提供了灵活的配置选项。
来源: src/definitions/modules/search.js11-34 src/definitions/modules/search.less1-25
该组件包含以下关键元素
该组件构建为 jQuery 插件，并为用户交互（如焦点、失焦和按键事件）注册事件处理程序。
来源: src/definitions/modules/search.js37-79 src/definitions/modules/search.less25-52
DOM 结构遵循 Semantic UI 的基于类的模式，并为搜索界面的不同部分包含嵌套元素。该组件根据搜索结果动态管理此结构。
来源: src/definitions/modules/search.js96-107 src/definitions/modules/search.less67-111
该组件处理用户输入并根据配置执行搜索。当用户在搜索提示中键入时，组件可以立即搜索或等待指定的延迟。然后，它会过滤本地数据或发出 API 请求，并在准备好时显示结果。
来源: src/definitions/modules/search.js146-158 src/definitions/modules/search.js251-268
搜索组件可以根据搜索查询过滤本地数据。这对于客户端搜索很有用，当所有数据都已可用时。
主要功能
本地搜索实现在 filterResults 方法中，该方法根据搜索查询过滤对象数组。
来源: src/definitions/modules/search.js784-837 src/definitions/modules/search.js848-881
对于大型数据集或动态内容，搜索组件可以查询远程 API 来获取结果。这使用了 API 模块（api.js）来处理请求。
主要功能
远程搜索设置
来源: src/definitions/modules/search.js334-362 src/definitions/behaviors/api.js172-272
搜索组件支持基于类别的结果，其中结果按类别分组。这可以与本地和远程数据一起使用。
本地数据类别搜索示例
类别显示有标题分隔不同的结果组。
来源: src/definitions/modules/search.js445-450 src/definitions/modules/search.less172-181
该组件支持键盘导航，以提高可访问性和用户体验
键盘事件处理实现在 handleKeyboard 方法中。
来源: src/definitions/modules/search.js251-332
在远程搜索期间，组件可以显示加载指示器来通知用户结果正在获取中。这使用了 Semantic UI 的加载组件。
通过向搜索组件添加 loading 类来切换加载状态。
来源: src/definitions/modules/search.less198-202 src/definitions/elements/loader.less22-68
当用户选择结果（通过单击或按 Enter）时，该组件会
onSelect 回调来源: src/definitions/modules/search.js209-247
该组件提供了许多设置来定制其行为
| 设置 | 类型 | 默认 | 描述 |
|---|---|---|---|
apiSettings | 对象 | {} | 传递给 API 模块的设置 |
minCharacters | 整型 | 1 | 搜索的最小字符数 |
searchDelay | 整型 | 300 | 搜索前的延迟（毫秒） |
transition | 字符串 | 'fade' | 显示结果时的动画 |
duration | 整型 | 300 | 动画的持续时间 |
maxResults | 整型 | 7 | 要显示的最大结果数 |
cache | 布尔值 | true | 是否缓存 API 结果 |
source | Array/Object | false | 结果的本地源 |
searchFields | 数组 | ['title', 'description'] | 要搜索的字段 |
fullTextSearch | 布尔值/字符串 | 'exact' | 'exact' 或 true 表示模糊匹配 |
类型 | 字符串 | 'standard' | 'standard' 或 'category' |
showNoResults | 布尔值 | true | 没有结果时显示消息 |
来源: src/definitions/modules/search.js37-60
该组件提供了几个回调函数来挂钩其行为
| 回调 | 描述 |
|---|---|
onSelect | 选择结果时调用 |
onResultsAdd | 将结果添加到 DOM 后调用 |
onSearchQuery | 执行搜索查询时调用 |
onResults | 返回结果时调用 |
onResultsOpen | 打开结果时调用 |
onResultsClose | 关闭结果时调用 |
来源: src/definitions/modules/search.js58-67
搜索组件的外观可以通过 search.variables 中定义的变量进行自定义。
该组件使用 LESS 变量来实现 Semantic UI 的主题一致性。
来源： src/themes/default/modules/search.variables1-77 src/definitions/modules/search.less10-52
搜索组件与其他几个 Semantic UI 组件集成
搜索组件在很多方面与下拉组件相似，但专门侧重于搜索功能。
来源： src/definitions/modules/search.js334-362 src/definitions/behaviors/api.js22-43 src/definitions/elements/loader.less25-68
来源： src/definitions/modules/search.js142-167 src/definitions/modules/search.js334-362
searchDelay 来防止过多的 API 调用cache 以减少重复请求maxResults 以提高渲染性能来源： src/definitions/modules/search.js146-157 src/definitions/behaviors/api.js140-152