Menu

搜索
搜索模块允许用户从选定的数据中查询results

下载

类型

标准

搜索可以显示一组results

使用一个 用户界面输入 允许您使用其他输入类型,如此图标输入

类别

搜索可以按类别显示来自远程内容的results

本地搜索

搜索可以在静态本地源中查找results.

默认情况下, results将首先返回以查询文本开头的内容, 但也在后面的内容匹配的查询内的任何地方. 要禁用全文搜索,可以在设置中指定 fullText搜索:假.
$('.ui.搜索”) .搜索({ 内容来源: }) ;

本地类别搜索
新2.3

搜索可以在静态本地源中查找类别results.

默认情况下, results将首先返回以查询文本开头的内容, 但也在后面的内容匹配的查询内的任何地方. 要禁用全文搜索,可以在设置中指定 fullText搜索:假.
$('.ui.搜索”) .搜索({ 类型:“类别”, 来源:categoryContent }) ;

加载

搜索可以显示一个加载指示器

变化

禁用
新2.3.1

搜索可以显示当前无法与之交互

流体

搜索results可能占用其容器的宽度

对齐

搜索results可以对齐到容器的左边缘或右边缘

初始化

搜索是建立在语义之上的 api 行为允许URL模板和UI状态管理. 请查看api文档以获得更多关于调整api设置的信息.

自动路由

默认情况下,搜索将自动路由到指定的 api端点 “搜索”

//初始化的默认端点/搜索/{query} $('.ui.搜索”) .搜索({ 类型:“类别” }) ;

指定URL

您可以指定自定义api设置来调整url, 回调函数设置, 或者指定一个不同的api操作.

$('.ui.搜索”) .搜索({ //设置搜索端点为自定义端点 api设置: { url:“自定义搜索/?q ={查询}' }, 类型:“类别” }) ;

本地对象

本地搜索results允许您在javacript对象文本的指定属性之间搜索匹配的值

属性设置可搜索的字段 搜索field 设置. 本地对象搜索只能显示标准搜索results(而不是类别).

//搜索所有可搜索对象的数组/对象 var 内容= [ { 标题:“马”, 描述:“一个动物”, }, { 标题:“牛”, 描述:另一种动物, } ] ; $('.ui.搜索”) .搜索({ 来源:内容, 搜索field:( “标题” ], fullText搜索:假 }) ;

服务器响应

您还可以考虑添加一个顶级属性,比如 真正的成功: 和使用的api successTest 参数确定服务器响应是否实际成功, 即使它返回正确的HTTP代码

标准

{ “results”:[ { “标题”:“results”, “url”:“/可选/ url / /点击“, “图像”:“可选图像.jpg”, “价格”:“可选的价格”, “描述”:“描述(可选)” }, { “标题”:“results”, “描述”:“描述” } ], //可选操作下面的results "行动":{ “url”:“/道路/ /results”, "text": "查看所有202个results" } }

类别

{ "results":{ " category1 ": { “名称”:“一级”, “results”:[ { “标题”:“results”, “url”:“/可选/ url / /点击“, “图像”:“可选图像.jpg”, “价格”:“可选的价格”, “描述”:“描述(可选)” }, { “标题”:“results”, “url”:“/可选/ url / /点击“, “图像”:“可选图像.jpg”, “价格”:“可选的价格”, “描述”:“描述(可选)” } ] }, " category2 ": { “名称”:“第二类”, “results”:[ { “标题”:“results”, “url”:“/可选/ url / /点击“, “图像”:“可选图像.jpg”, “价格”:“可选的价格”, “描述”:“描述(可选)” } ] } }, //可选操作下面的results "行动":{ “url”:“/道路/ /results”, "text": "查看所有202个results" } }

检索results

独特的id

如果没有 id 属性包含在results中, 当为每个results返回results时,将自动生成一个键.

id是使用results中的位置生成的, 例如,第一个元素将接收id 1,第一个类别results将收到id a1.

An id 或者搜索results标题可以用 得到的results(值) 返回results对象.

//获取标题为cat的当前查询results $('.ui.搜索”) .搜索(“得到的results”,“猫”) ; //从第一个类别中获得第一个results $('.ui.搜索”) .搜索(“得到的results”,“a1”) ; //获取标准搜索的第一个results $('.ui.搜索”) .搜索(的results',' 1 ') ;

行为

下面的所有行为都可以使用该语法调用:

$('.your.元素”) .搜索('行为名称',argumentOne, argumentTwo) ;
行为 描述
查询(回调) 搜索当前在搜索输入中设置的值
显示信息(文本、类型) 使用模板匹配类型在搜索results中显示带有文本的消息
取消查询 取消当前远程搜索查询
搜索本地(查询) 在本地对象中搜索指定的查询和显示results
有最小的字符 是否具有最小字符
搜索远程(查询、回调) 为指定的查询和显示results搜索远程端点
搜索对象(查询、对象、搜索field) 搜索指定查询的对象并返回results
取消查询 取消当前的远程搜索请求
主要是 搜索当前是否有焦点
是可见的 搜索results是否可见
是空的 搜索results是否为空
获得的价值 返回当前搜索值
得到的results(值) 返回匹配搜索标题或id的JSON对象(见上面)
设置值(值) 将搜索输入设置为值
读缓存(查询) 读取缓存results进行查询
清楚缓存(查询) 从缓存中清除值,如果没有参数通过则清除所有缓存
写缓存(查询) 为查询写入缓存results
添加results(html) 向results和显示中添加HTML
显示results(回调) 显示results容器
隐藏results(回调) 隐藏results容器
生成results(响应) 指定的解析器生成results 设置.template
摧毁 删除所有事件

例子

使用不同的响应字段

搜索需要一个非常特定的api响应, 但是,您可以轻松地使用 字段 参数.

$('.ui.搜索”) .搜索({ api设置: { url: / / api.Github.com/搜索/repositories?q ={查询}' }, 领域:{ results:“项目”, 标题:“名字”, url:“html_url” }, minCharacters: 3 }) ;

使用api设置

api 提供一个回调 onResponse 可以用来重组第三方api,以匹配搜索所需的服务器响应.

你也可以使用 mockResponseAsync 使用自定义后端来填充搜索.

$('.ui.搜索”) .搜索({ 类型 : ' 类别”, minCharacters: 3, api设置: { onResponse:函数(GithubResponse) { var 响应= { results:{} } ; //翻译gitHub api响应与搜索 $.每个(GithubResponse.项s, function(index, item) { var 语言=项目.语言| |“未知”, maxResults = 8 ; if(index >= maxResults) { 返回错误; } //创建新的语言类别 如果(响应.result [language] === undefined) { 响应.results(语言)= { 名称:语言, results:[] }; } //添加results到类别 响应.results(语言).results.({推 标题:项.的名字, 描述:项目.描述, url : 项.html_url }); }); 返回响应; }, url: / / api.Github.com/搜索/repositories?q ={查询}' } }) ;

搜索

行为

默认的 描述
api设置
{ 行动:“搜索” }
设置 api 调用.
minCharacters 1 查询results的最小字符数
搜索OnFocus true 搜索是否应该显示焦点上的results(也必须匹配最小字符长度)
过渡 fade 命名过渡时使用的动画菜单进出. 淡入和滑下都是可用的,不包括 ui的转换
持续时间 300 动画事件持续时间
maxResults 7 使用本地和简单搜索时显示的最大results, 类别搜索的最大类别计数
缓存 true 缓存results在本地,以避免请求服务器
source 指定一个将在本地搜索的Javascript对象
selectFirstResult 搜索是否应该在搜索后自动选择第一个搜索results
showNoResults 如果没有找到results,是否应该显示“没有results”消息. (这些消息可以使用 template 下面的对象指定)
fullText搜索 “准确” 指定为“true”将使用模糊全文搜索, 设置为"exact"将强制在字符串的某个地方匹配精确搜索, 设置为 将只匹配字符串的开始. (这个设置以前被调用过 搜索FullText.)
字段
领域:{ Categories: 'results', //类别数组(类别视图) categoryName: 'name', //类别名称(类别视图) categoryResults: 'results', //results数组(类别视图) 描述: ' 描述 ', //results描述 图像: ' 图像 ', // result 图像 Price: ' Price ', //results的价格 Results: ' Results ', //数组的results(标准) Title: ' Title ', //results标题 Action: ' Action ', // "view more"对象名称 actionText: 'text', // "view more"文本 actionURL: 'url' // "view more" url }
列表映射显示内容到JSON属性,使用api或 source.
搜索field
[ “标题”, “描述” ]
指定将被搜索的本地源对象内的对象属性
hideDelay 0 延迟隐藏搜索模糊后的results
搜索Delay 100 在inputchange上查询results之前的延迟
宽松 easeOutExpo 简化方程式时使用后退Javascript动画

回调

上下文 描述
onSelect(因此,响应) 模块 用户对元素选择的回调. 第一个参数包括该元素过滤后的响应results. 函数应该返回假以防止默认操作(关闭搜索results并选择值).
onResultsAdd (html) 模块 处理后的回调元素模板添加HTML到results. 函数应返回假以防止默认操作.
on搜索Query(查询) 模块 搜索查询回调
onResults(响应) 模块 服务器响应上的回调
onResultsOpen results元素 打开results时进行回调
onResultsClose results元素 关闭results时的回调

模板

这些模板用于生成搜索results的HTML结构

通过将搜索指定为 类型:“customType”下的自定义模板 $.fn.搜索.设置.模板.customType 您可以创建自定义搜索results. 记住 .title 将用于匹配results onSelect
功能
模板
$.fn.搜索.设置.模板:{ 逃脱:函数(字符串){ //返回转义字符串注入results }, 消息:函数(消息,类型){ //返回带有给定消息类型的HTML }, 类别:函数(响应){ //返回resultsHTML类别results }, 标准:函数(响应){ //为标准results返回resultsHTML } }

模块

这些设置对所有模块都是原生的, 并定义组件如何将内容绑定到DOM属性, 以及调试模块的设置.

默认的 描述
name 搜索 日志语句中使用的名称
名称空间 搜索 事件名称空间. 确保模块拆卸不会影响附加到元素的其他事件.
正则表达式
正则表达式: { 逃避 : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, beginsWith: ' (?:\s|^)' }
用于匹配的正则表达式
选择器
选择器:{ 提示 : '.提示', 搜索Button:“.搜索.按钮”, results:“.results”, 类别:“.类别”, results : '.results” }
用于查找模块部件的选择器
元数据
元数据:{ 缓存:缓存, results:“results” }
HTML5元数据属性在内部使用
类名称
名称:{ 积极:“活跃”, 空:“空”, 专注:“专注”, 加载:“加载”, 按:“下来” }
用于确定元素状态的类名
沉默 关闭所有控制台输出,包括错误消息,而不考虑其他调试设置.
调试 调试输出到控制台
性能 true show 控制台.table 具有性能指标的输出
详细的 调试输出包括所有的内部行为
错误
错误:{ 来源:'不能搜索. 没有源使用,语义api模块不包括', noResults:“你的搜索没有返回results”, 日志:'调试日志错误,退出.', noTemplate: '没有指定有效的模板名.', serverError: '查询服务器有问题.', maxResults: 'Results必须是使用maxResults设置的数组', 方法:'你调用的方法没有定义.' },

调光器的信息
调光器分联箱

友情链接: 1 2 3 4 5 6 7 8 9