我们承诺每个页面不显示超过一个小型广告。别担心，隐藏此消息将确保你不会再被烦扰。
类型
标准
搜索可以显示一组结果
类别
搜索可以显示按类别排序的远程内容结果
本地搜索
搜索可以在静态本地源中查找结果。
$('.ui.search') .search({ source: content }) ;
var content = [ { title: '安道尔' }, { title: '阿拉伯联合酋长国' }, { title: '阿富汗' }, { title: '安提瓜' }, { title: '安圭拉' }, { title: '阿尔巴尼亚' }, { title: '亚美尼亚' }, { title: '荷属安的列斯群岛' }, { title: '安哥拉' }, { title: '阿根廷' }, { title: '美属萨摩亚' }, { title: '奥地利' }, { title: '澳大利亚' }, { title: '阿鲁巴' }, { title: '奥兰群岛' }, { title: '阿塞拜疆' }, { title: '波斯尼亚' }, { title: '巴巴多斯' }, { title: '孟加拉国' }, { title: '比利时' }, { title: '布基纳法索' }, { title: '保加利亚' }, { title: '巴林' }, { title: '布隆迪' } // 等等 ];
本地类别搜索2.3 中的新功能
搜索可以在静态本地源中查找类别结果。
$('.ui.search') .search({ type: 'category', source: categoryContent }) ;
var categoryContent = [ { category: '南美洲', title: '巴西' }, { category: '南美洲', title: '秘鲁' }, { category: '北美洲', title: '加拿大' }, { category: '亚洲', title: '韩国' }, { category: '亚洲', title: '日本' }, { category: '亚洲', title: '中国' }, { category: '欧洲', title: '丹麦' }, { category: '欧洲', title: '英国' }, { category: '欧洲', title: '法国' }, { category: '欧洲', title: '德国' }, { category: '非洲', title: '埃塞俄比亚' }, { category: '非洲', title: '尼日利亚' }, { category: '非洲', title: '津巴布韦' }, ];
州
加载
搜索可以显示加载指示器
变体
禁用2.3.1 中的新功能
搜索可以显示它当前无法与之交互
流体
搜索的结果可以占据其容器的宽度
对齐
搜索的结果可以与其左侧或右侧容器边缘对齐
初始化
自动路由
默认情况下，搜索会自动路由到名为 API 端点 'search'
// 使用默认端点 /search/{query} 初始化 $('.ui.search') .search({ type: 'category' }) ;
命名 URL
你可以指定自定义 API 设置以调整 URL、回调设置或指定不同的 API 操作。
$('.ui.search') .search({ // 通过操作 apiSettings 将搜索端点更改为自定义端点 apiSettings: { url: 'custom-search/?q={query}' }, type: 'category' }) ;
本地对象
本地搜索结果允许你在指定的 javascript 对象文字属性中搜索匹配的值
你可以使用 searchFields 设置来设置哪些字段可搜索。本地对象搜索只能显示标准搜索结果（不是类别）。
// 在任何可搜索对象的数组/对象中搜索 var content = [ { title: '马', description: '一种动物', }, { title: '牛', description: '另一种动物', } ] ; $('.ui.search') .search({ source : content, searchFields : [ 'title' ], fullTextSearch: false }) ;
服务器响应
标准
{ "results": [ { "title": "结果标题", "url": "/可选/url/on/click", "image": "可选-image.jpg", "price": "可选价格", "description": "可选描述" }, { "title": "结果标题", "description": "结果描述" } ], // 可选操作位于结果下方 "action": { "url": '/path/to/results', "text": "查看所有 202 个结果" } }
类别
{ "results": { "category1": { "name": "类别 1", "results": [ { "title": "结果标题", "url": "/可选/url/on/click", "image": "可选-image.jpg", "price": "可选价格", "description": "可选描述" }, { "title": "结果标题", "url": "/可选/url/on/click", "image": "可选-image.jpg", "price": "可选价格", "description": "可选描述" } ] }, "category2": { "name": "类别 2", "results": [ { "title": "结果标题", "url": "/可选/url/on/click", "image": "可选-image.jpg", "price": "可选价格", "description": "可选描述" } ] } }, // 可选操作位于结果下方 "action": { "url": '/path/to/results', "text": "查看所有 202 个结果" } }
检索结果
唯一 ID
如果结果中没有包含 id 属性，则在返回结果时将自动为每个结果生成一个键。
ID 是使用结果中的位置生成的，例如，第一个元素将接收 id 1，第一个类别结果将接收 id a1。
然后可以使用 get result(value) 来返回与搜索标题或 ID 匹配的结果对象。
// 从当前查询结果中获取标题为猫的结果 $('.ui.search') .search('get result', 'cat') ; // 从类别搜索中获取第一个类别的第一个结果 $('.ui.search') .search('get result', 'a1') ; // 从标准搜索中获取第一个结果 $('.ui.search') .search('get result', '1') ;
行为
所有以下行为都可以使用以下语法调用
$('.your.element') .search('behavior name', argumentOne, argumentTwo) ;
| 行为 | 描述 |
|---|---|
| query (回调) | 搜索当前在搜索输入框中设置的值 |
| display message(text, type) | 使用模板匹配类型在搜索结果中显示文本消息 |
| cancel query | 取消当前的远程搜索查询 |
| search local(query) | 在本地对象中搜索指定查询并显示结果 |
| has minimum characters | 是否具有最小字符数 |
| search remote(query, callback) | 在远程端点搜索指定查询并显示结果 |
| search object(query, object, searchFields) | 在对象中搜索指定查询并返回结果 |
| cancel query | 取消当前的远程搜索请求 |
| is focused | 搜索当前是否处于焦点状态 |
| is visible | 搜索结果是否可见 |
| is empty | 搜索结果是否为空 |
| get value | 返回当前搜索值 |
| get result(value) | 返回与搜索标题或 ID 匹配的 JSON 对象（见上文） |
| set value(value) | 将搜索输入框设置为 value |
| read cache(query) | 读取查询的缓存结果 |
| 清除缓存(查询) | 清除缓存中的值，如果未传递参数则清除所有缓存 |
| 写入缓存(查询) | 写入查询的缓存结果 |
| 添加结果(html) | 将 HTML 添加到结果并显示 |
| 显示结果(回调) | 显示结果容器 |
| 隐藏结果(回调) | 隐藏结果容器 |
| 生成结果(响应) | 使用由 settings.template 指定的解析器生成结果 |
| 销毁 | 删除所有事件 |
示例
使用不同的响应字段
搜索需要非常特定的 API 响应，但是您可以使用 fields 参数轻松修改服务器响应到显示字段的映射。
$('.ui.search') .search({ apiSettings: { url: '//api.github.com/search/repositories?q={query}' }, fields: { results : 'items', title : 'name', url : 'html_url' }, minCharacters : 3 }) ;
使用 API 设置
API 提供一个回调 onResponse，可用于重构第三方 API 以匹配搜索的预期服务器响应。
您也可以使用 mockResponseAsync 来使用自定义后端来实现搜索。
$('.ui.search') .search({ type : 'category', minCharacters : 3, apiSettings : { onResponse: function(githubResponse) { var response = { results : {} } ; // 将 GitHub API 响应转换为与搜索匹配的响应 $.each(githubResponse.items, function(index, item) { var language = item.language || 'Unknown', maxResults = 8 ; if(index >= maxResults) { return false; } // 创建新的语言类别 if(response.results[language] === undefined) { response.results[language] = { name : language, results : [] }; } // 将结果添加到类别中 response.results[language].results.push({ title : item.name, description : item.description, url : item.html_url }); }); return response; }, url: '//api.github.com/search/repositories?q={query}' } }) ;
搜索
行为
| 默认 | 描述 | |
|---|---|---|
| apiSettings |
{ action: 'search' }
|
用于 API 调用的设置。 |
| minCharacters | 1 | 查询结果的最小字符数 |
| searchOnFocus | true | 搜索是否应在聚焦时显示结果（还必须匹配最小字符长度） |
| transition | fade | 在动画菜单进出时使用的命名过渡。淡入淡出和向下滑动在不包含 ui 过渡 的情况下可用 |
| duration | 300 | 动画事件的持续时间 |
| maxResults | 7 | 使用本地搜索和简单搜索时显示的最大结果数，类别搜索的最大类别数 |
| cache | true | 在本地缓存结果以避免重新查询服务器 |
| source | false | 指定将被本地搜索的 Javascript 对象 |
| selectFirstResult | false | 搜索后是否应自动选择第一个搜索结果 |
| showNoResults | false | 如果未找到结果，是否应显示“无结果”消息。（这些消息可以使用下面指定的 template 对象修改） |
| fullTextSearch | 'exact' | 指定为“true”将使用模糊全文本搜索，设置为“exact”将强制精确搜索匹配字符串中的某个位置，设置为 false 将仅匹配字符串的开头。（此设置以前称为 searchFullText。） |
| fields |
fields: { categories : 'results', // 类别数组（类别视图） categoryName : 'name', // 类别名称（类别视图） categoryResults : 'results', // 结果数组（类别视图） description : 'description', // 结果描述 image : 'image', // 结果图像 price : 'price', // 结果价格 results : 'results', // 结果数组（标准） title : 'title', // 结果标题 action : 'action', // “查看更多”对象名称 actionText : 'text', // “查看更多”文本 actionURL : 'url' // “查看更多”url }
|
列出将显示内容映射到 JSON 属性，可以使用 API 或 source。 |
| searchFields |
[ 'title', 'description' ]
|
指定本地源对象内将被搜索的对象属性 |
| hideDelay | 0 | 搜索模糊后隐藏结果之前的延迟 |
| searchDelay | 100 | 在 inputchange 上查询结果之前的延迟 |
| easing | easeOutExpo | 使用回退 Javascript 动画时的缓动方程 |
回调
| 上下文 | 描述 | |
|---|---|---|
| onSelect(result, response) | 模块 | 用户选择元素时的回调。第一个参数包含该元素的过滤响应结果。该函数应返回 false 以防止默认操作（关闭搜索结果并选择值）。 |
| onResultsAdd(html) | 模块 | 处理元素模板后将 HTML 添加到结果的回调。该函数应返回 false 以防止默认操作。 |
| onSearchQuery(query) | 模块 | 搜索查询时的回调 |
| onResults(response) | 模块 | 服务器响应时的回调 |
| onResultsOpen | 结果元素 | 结果打开时的回调 |
| onResultsClose | 结果元素 | 结果关闭时的回调 |
模板
这些模板用于生成搜索结果的 HTML 结构
| 函数 | |
|---|---|
| templates |
$.fn.search.settings.templates : { escape: function(string) { // 返回用于注入结果的转义字符串 }, message: function(message, type) { // 返回具有给定消息和类型的消息的 html }, category: function(response) { // 返回类别结果的 results html }, standard: function(response) { // 返回标准结果的 results html } }
|
模块
这些设置是所有模块的原生设置，并定义组件如何将内容绑定到 DOM 属性，以及模块的调试设置。
| 默认 | 描述 | |
|---|---|---|
| name | 搜索 | 日志语句中使用的名称 |
| namespace | search | 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。 |
| regExp |
regExp: { escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, beginsWith : '(?:\s|^)' }
|
用于匹配的正则表达式 |
| selector |
selector : { prompt : '.prompt', searchButton : '.search.button', results : '.results', category : '.category', result : '.result' }
|
用于查找模块部分的选择器 |
| metadata |
metadata: { cache : 'cache', results : 'results' }
|
内部使用的 HTML5 元数据属性 |
| className |
className: { active : 'active', empty : 'empty', focus : 'focus', loading : 'loading', pressed : 'down' }
|
用于确定元素状态的类名 |
| silent | False | 使所有控制台输出静音，包括错误消息，无论其他调试设置如何。 |
| debug | false | 调试输出到控制台 |
| performance | true | 显示具有性能指标的 console.table 输出 |
| verbose | false | 调试输出包括所有内部行为 |
| errors |
error : { source : '无法搜索。未使用任何源，并且未包含 Semantic API 模块', noResults : '您的搜索未返回任何结果', logging : '调试日志记录错误，退出。', noTemplate : '未指定有效的模板名称。', serverError : '查询服务器时出现问题。', maxResults : '要使用 maxResults 设置，结果必须是数组', method : '您调用的方法未定义。' },
|
|