美文网首页
搜索功能设计

搜索功能设计

作者: 狸狸深深 | 来源:发表于2017-06-26 17:05 被阅读0次

我们的搜索功能和界面是在solr自带示例基础上修改完成的,在此基础上,我们基本拥有示例所有功能并美化了界面。目前我们所完成的搜索功能有: (除特意指出的,其他都在solrconfig.xml中设置)

  • 关键词搜索
  • 高级搜索
  • 分组统计
  • 分页显示
  • 搜索结果高亮
  • 拼写检查、自动纠错
  • 搜索建议、自动补全
  • 相似匹配

关键词搜索

关键词搜索就是在搜索框中输入查询词,搜索结果按要求顺序显示。排序规则权重设置如图:

权重.PNG

高级搜索

由于时间有限,我们的高级搜索功能暂时是在关键词搜索的基础上,以乐器种类作为过滤器,为用户筛选出更明确的结果。

高级搜索.PNG

分组统计

我们实现分组统计的方法是使用了Solr的Facet组件, Facet组件是Solr默认集成的一个组件,可以给用户提供更友好的搜索体验,在搜索关键字的同时,能够按照Facet的字段进行分组并统计。

分类.PNG
  • Facet设置
  • facet=on:启用facet组件
  • facet.missing :默认为””,如果设置为true或者on,那么将统计那些该Facet字段值为null的记录。
  • facet.field:设置需要进行facet查询的字段
  • facet.query:利用类似于filter query的语法提供了更为灵活的Facet。通过facet.query参数,可以对任意字段进行筛选。
  • facet.mincount:限制了Facet字段值的最小count,默认为0。合理设置该参数可以将用户的关注点集中在少数比较热门的领域。
分组.PNG

分页显示

对搜索结果分页显示,保证每次查询都只需返回整个搜索结果中的一个很小的集合,从而提高系统的响应速度。

分页.PNG

由于搜索结果中图片较多且尺寸不同,我们采用小图显示,鼠标悬浮显示大图,简化界面,便于浏览。

大图.png

搜索结果高亮

在结果显示时,对用户输入的检索词粗体加黑高亮显示,辅助用户进行浏览查询与结果筛选。

  • 输入检索词“民歌”,效果如图
高亮.png
  • 设置
  • hl=on:启用组件
  • hl.fl :想要高亮处理的字段
  • hl.simple.pre和hl.simple.post:设置前后标签,不用两个参数的话,默认的是在高亮内容两边加<em></em>
    高亮设置.png

拼写检查、自动纠错

设计拼写检查和纠错机制,在用户出现拼写错误时自动根据该词语在索引中是否存在而做出相应处理,若错误则返回错误提醒,并提示正确搜索词。

  • 效果
拼写检查.png
  • /browserequestHandler中启用spellcheck
spell.png
  • 设置spellchecksearchComponent
    <searchComponent name="spellcheck" class="solr.SpellCheckComponent">
    <str name="queryAnalyzerFieldType">string</str>
    <lst name="spellchecker">
    <str name="name">default</str>
    <str name="field">title</str>
    <str name="classname">solr.DirectSolrSpellChecker</str>
    <str name="distanceMeasure">internal</str>
    <float name="accuracy">0.5</float>
    <int name="maxEdits">2</int>
    <int name="minPrefix">1</int>
    <int name="maxInspections">5</int>
    <int name="minQueryLength">2</int>
    <float name="maxQueryFrequency">0.0000001</float>
    </lst>
    </searchComponent>

  • 设置/spellrequestHandler
    <requestHandler name="/spell" class="solr.SearchHandler" startup="lazy">
    <lst name="defaults">

    <str name="spellcheck.dictionary">default</str>
    <str name="spellcheck">on</str>
    <str name="spellcheck.extendedResults">true</str>
    <str name="spellcheck.count">10</str>
    <str name="spellcheck.alternativeTermCount">5</str>
    <str name="spellcheck.maxResultsForSuggest">5</str>
    <str name="spellcheck.collate">true</str>
    <str name="spellcheck.collateExtendedResults">true</str>
    <str name="spellcheck.maxCollationTries">10</str>
    <str name="spellcheck.maxCollations">5</str>
    </lst>
    <arr name="last-components">
    <str>spellcheck</str>
    </arr>
    </requestHandler>

搜索建议、自动补全

根据用户输入,从系统索引文件中的文档内容匹配出相应的terms,并实时在输入框下方显示出来,节省用户检索时间,降低用户输入错误查询词的几率。

  • 效果显示
建议.png
  • 设置suggestsearchComponent
    <searchComponent name="suggest" class="solr.SuggestComponent">
    <lst name="suggester">
    <str name="name">mySuggester</str>
    <str name="field">title</str>
    <str name="lookupImpl">FuzzyLookupFactory</str>
    <str name="dictionaryImpl">FileDictionaryFactory</str>
    <str name="suggestAnalyzerFieldType">textComplex</str>
    <str name="buildOnStartup">false</str>
    </lst>
    </searchComponent>
  • 设置/suggestrequestHandler
    <requestHandler name="/suggest" class="solr.SearchHandler" startup="lazy" >
    <lst name="defaults">
    <str name="suggest.dictionary">mySuggester</str>
    <str name="suggest">true</str>
    <str name="suggest.count">10</str>
    </lst>
    <arr name="components">
    <str>suggest</str>
    </arr>
    </requestHandler>
  • 修改suggest.vmhead.vm中的参数,改为自己设置的field name
suggest.png head.png
  • head.vm中我们可以看到引用了jquery autocomplete.js和对应的库。如果设置完后没有效果,可以用浏览器开发者工具查看是否有这个jquery-1.7.2.min.js这个资源,若没有,检查一下路径。
autocomplete.png

相似匹配

Solr 使用 MoreLikeThisComponent(MLT)和 MoreLikeThisHandler 实现了一样的功能。MLT 是与标准 SolrRequestHandler 集成在一起的;MoreLikeThisHandler 与 MLT 结合在一起,并添加了一些其他选项,但它要求发布一个单一的请求。

  • 效果显示
MLT.PNG
  • solrconfig.xml中设置
  • mlt.qf:权重设置,结果经过计算按顺序返回。
  • mlt.fl:用于创建 MLT 查询的字段。
  • mlt.count:可选。每一个结果要检索的相似文档数。


    mlt设置.PNG

相关文章

  • 搜索功能设计

    搜索功能的原理主要是三步: Step1:对用户输入信息的解读转译 Step2:根据用户的输入信息对内容进行筛选 S...

  • 搜索功能设计

    我们的搜索功能和界面是在solr自带示例基础上修改完成的,在此基础上,我们基本拥有示例所有功能并美化了界面。目前我...

  • 基础功能理解:搜索功能的设计理解

    搜索功能是许多产品的核心,例如电商搜索、内容搜索等等。面对如何进行搜索功能设计,确实是个看似简单实则深奥的问题。不...

  • 搜索功能设计总结

    设计师如果想完成自我提升,就应该懂产品。但是设计师如何去跨越那条“鸿沟”,学习站在产品的角度去构思设计,我却很少提...

  • 搜索功能设计总结

    在之前的好几篇的文章中,我都提到了设计师如果想完成自我提升,就应该懂产品。但是设计师如何去跨越那条“鸿沟”,学习站...

  • 搜索功能设计总结

    在之前的好几篇的文章中,我都提到了设计师如果想完成自我提升,就应该懂产品。但是设计师如何去跨越那条“鸿沟”,学习站...

  • 搜索功能设计总结

    转自:王M争(ID:Wang-Michael-Zheng)作者:王M争 在之前的好几篇的文章中,我都提到了设计师如...

  • 【读书笔记3】从产品角度看产品搜索功能设计

    原文地址:这篇搜索功能设计的总结,帮你从产品的角度看问题 - 优设-UISDC 1、搜索功能的作用:产品包含功能太...

  • 微信小程序来了推荐关注十大应用

    可用产品战略与产品功能设计 阅读时间5分钟 昨天晚上有赞的麦麦说他们的有赞精选上线了,但我没有搜索到。早上果然搜索...

  • 意味着JNPF迈入新时代的3.4版本,与3.3.3版本有着哪些功

    在线开发 3.3.3版本 同一个功能分功能设计和移动设计 功能设计没有更换模式 功能设计没有同步菜单 功能设计和移...

网友评论

      本文标题:搜索功能设计

      本文链接:https://www.haomeiwen.com/subject/ssqjcxtx.html