用于网站搜索的第一方 Elastic Site Search jQuery 插件。
要求:
在网页标题中包含以下内容:
总而言之,它应该看起来像这样:
< script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > </ script >
< script type =" text/javascript " src =" jquery.swiftype.search.js " > </ script >
< link type =" text/css " rel =" stylesheet " href =" search.css " media =" all " />
注意:此客户端仅为 Elastic Site Search API 端点而开发。您可以参阅 Elastic Site Search API 文档以了解更多上下文。
首先,页面上至少包含以下三个元素:表单、表单内的输入字段和结果容器。
< form >
< input type =" text " placeholder =" Search " id =" st-search-input " />
</ form >
< div id =" st-results-container " > </ div >
将 swifttype 方法应用于网页表单内的现有搜索输入字段,并提供结果容器。例如,将其添加到 id st-search-input
的搜索输入字段,如下所示:
$ ( '#st-search-input' ) . swiftypeSearch ( {
resultContainingElement : '#st-results-container' ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;
请务必更改上面显示的engineKey
属性,以匹配分配给您的 Swiftype 搜索引擎的属性。如果您使用的是 Web 界面,搜索引擎密钥将列在仪表板的第一页上。
该插件是根据您的具体用例灵活编写的。例如,您可能希望为每个结果检索更多数据,自定义向用户显示数据的方式,或将搜索查询限制为搜索引擎的某些元素。
让我们看一个完成所有这些操作的示例。对于此示例,假设您遵循了 Ruby Gem 的快速入门教程,现在您的示例搜索引擎中已索引了书店的数据。
要指定每页的结果数,请使用perPage
属性。
$ ( '#st-search-input' ) . swiftypeSearch ( {
engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
perPage : 20
} ) ;
API 接受的最大值为 100。
搜索期间查询的任何字段都将返回结果的突出显示属性中的顶部匹配项(如果有)。此表单中的所有片段都具有来自编码的原始文本的 HTML 实体。实际的突出显示是使用(未编码的) <em>
标签指定的。
您可以使用highlightFields
选项自定义在突出显示属性中返回哪些字段:
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
highlightFields : { 'books' : { 'body' : { 'size' : 300 , 'fallback' : true } } }
} ) ;
highlightFields
选项接受一个散列,其中包含您想要为每种文档类型的每个对象突出显示的字段。对于每个字段,将size
指定为要包含在代码段中的最大字符数。如果突出显示不适用于该字段,则将fallback
设置为 true 可以强制包含未突出显示的片段。
有关highlightFields
的其他示例,请参阅 custom.html 文件。
要指定您希望从 API 返回的字段,请将fetchFields
属性设置为一个散列,该散列包含一个数组,其中列出了您希望为每种文档类型返回的字段。例如,如果您为每个文档索引了title
、 genre
和published_on
字段,则可以按如下方式返回它们:
$ ( '#st-search-input' ) . swiftypeSearch ( {
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;
这些附加字段将随每个项目一起返回,并且可以在渲染函数中访问它们,如下一节所示。
现在您拥有每个结果项的更多数据,您将需要自定义项呈现函数以使用它们。
默认渲染函数如下所示:
var defaultRenderFunction = function ( document_type , item ) {
return '<div class="st-result"><h3 class="title"><a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a></h3></div>' ;
} ;
其他字段可用作项目字典中的键,因此您可以自定义它以使用genre
字段,如下所示:
var customRenderFunction = function ( document_type , item ) {
var out = '<a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a>' ;
return out . concat ( '<p class="genre">' + item [ 'genre' ] + '</p>' ) ;
} ;
现在只需将选项字典中的renderFunction
属性设置为您的customRenderFunction
即可告诉我们的插件使用您的函数来渲染结果:
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;
默认情况下,Swiftype 搜索库会将提交的查询与为文档建立索引的任何string
或text
字段进行匹配。因此,如果您想确保它仅匹配title
字段中的条目,例如,您可以指定searchFields
选项:
$('#st-search-input').swiftypeSearch({
renderFunction: customRenderFunction,
fetchFields: {'books': ['title','genre','published_on']},
searchFields: {'books': ['title']},
engineKey: 'jaDGyzkR6iYHkfNsPpNK'
});
与fetchFields
选项类似, searchFields
接受一个散列,其中包含您希望用户的查询匹配的每个 document_type 的字段数组。
现在,假设您只希望结果显示小说genre
且in_stock的书籍。为了限制搜索结果,您可以通过在filters
字段中将附加查询条件指定为字典,将附加查询条件传递给搜索 API。过滤器字段中的多个子句通过 AND 逻辑组合:
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
searchFields : { 'books' : [ 'title' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;
在某些情况下,您可能需要手动触发新的搜索。可以使用以下方法来执行此操作。这种情况的一个例子是,如果用户选择应用过滤器并且需要执行新的查询。
Swiftype.reloadResults();
是的!如果您正在寻找自动完成功能,请查看 Swiftype 自动完成插件。
如果某些内容未按预期工作,请提出问题。
最好的选择是阅读文档。
您可以查看 Elastic Site Search 社区讨论论坛。
我们欢迎对该项目的贡献者。在开始之前,请注意以下几点...
麻省理工学院©弹性
感谢所有贡献者!