仿京东搜索框代码（京东搜索框素材）

本篇文章给大家谈谈仿京东搜索框代码，以及京东搜索框素材对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、模拟实战京东搜索效果（二）
• 2、【实践】仿京东商城小程序（附源码）
• 3、仿京东淘宝搜索框实战
• 4、在京东的首页中通过查看源找到搜索框的代码如下

模拟实战京东搜索效果（二）

Query下拉推荐是指搜索引擎系统根据用户当前的输入，自动提供一个Query候选列表供用户选择，Query下拉提示(Query suggestion)在搜索引擎和广告竞价平台中已经是标配的产品。Query suggestion可以帮助用户明确搜索意图，减少用户的输入并节约搜索时间，对提高搜索体验有重要作用。各个搜索系统的下拉推荐的处理流程基本相同，下拉推荐不同主要体现在后台查询机制的不同，下面介绍几种京东搜索框效果：

这里面大致包含如下几个功能点：

当用户输入关键词比较长，或商品库中没有匹配的商品时，京东会对用户输入语句进行意图识别，分析用户最想要的是什么，找到核心关键词并进行相关推荐。

如用户输入 五彩斑斓的苹果球鞋 时，京东会先进行一次精确搜索，当所有词都匹配上时才会返回结果，如果没有结果返回，京东服务端会进行查询改写，将用户输入关键词匹配度降低50%后去商品库再进行一次模糊搜索，如果还找不到匹配的商品时，京东会进行意图识别，对识别的关键词进行推荐；“五彩斑斓的苹果球鞋” 分词后被拆分成 五彩斑斓、苹果、球鞋，显然没有匹配的商品，模糊50%需要同时满足其中任意两个词同时出现，显然也没有对应的商品(这里大家可以试着增加 耐克 或删除 苹果 看下效果)，在上述环节都无结果时 最后从用户输入关键词中识别出球鞋，并进行相关商品推荐。

鉴于第一版 易企秀商城 大搜效果一直被大家吐槽，今天我们就仿造京东来一波优化，通过ES实现 输入框联想词提示 及 对用户输入词进行意图分析。

这里有两种实现方案，一种是通过ES官方自带的算法支持，另外一种我们通过edge n-gram实现。

什么是edge n-gram ? 假设有一个词hello，普通建索引时，就是把这个词hello放入倒排索引

用户输入h、he时会找不到索引(倒排索引中只有hello)，因此匹配失败

而对于输入即搜索这种应用场景，可以使用一种特殊的n-gram，称为边界n-grams (edge n-grams)

所谓的edge n-gram，就是指它会固定从一边开始，进行窗口滑动，每次滑动长度为1，最终的结果取决于 n 的选择长度

以单词hello为例，它的edge n-gram的结果如下：

因此可以发现到，在使用edge n-gram建索引时，一个单词会生成好几个索引，而这些索引一定是从头开始

这符合了输入即搜索的特性，即是用户打h、he能找到倒排中的索引h、he，而这些索引对应著的数据就是hello

需要注意的是将keep_full_pinyin置为false，keep_joined_full_pinyin设为true；如果需要支持简拼提示，可将keep_first_letter设为true；开启keep_first_letter支持的提示词输入场景会增多，但同时也会触发一些长尾词效果问题，如输入韩式婚礼，会在候选提示词列表中出现 红色婚礼，原因是他们的简拼都是hshl。同样这些问题在京东PC站也有存在，如果要开启keep_first_letter 就需要对一些长尾词进行容忍：

completion 是ES自带的联想词提示功能，它采用了一种支持快速前缀查找的数据结构，并将数据存储在内存中，检索效率非常高，但缺点也很明显，不能对结果进行自定义排序。

需要注意的是 这里需要将keep_first_letter设置为true ,否则无法进行任意位置的简拼提示；但开启简拼后，需要配合一个好的提示词排序算法，否则就会出现 输入 韩式婚礼 提示 红色婚礼。

其它配置：

基于用户的搜索长句，找到最能表达用户搜索意图的核心关键词组；如 电影院影城复工开业活动宣传 - 电影院复工宣传

意图识别和纠错识别都是基于现有词条实现的，覆盖率与准度受限于提示词库。

大多数情况下我们都是通过输入关键词来查找满足条件的文档，然而意图识别有点类似于给出一段短文本文档来获取满足条件的搜索关键词，通过ES的percolate query可以实现这种反向输入查询。

首先我们需要为每一个词条定义一种查询方式，这里我们统一使用一种query ：

这里使用的是span_near query，否则 武汉加油 与 加油武汉 都会被 “我们一起为武汉加油” 所召回；具体排序方式以及召回策略可根据具体业务层场景灵活调整，通过slop来调整词的编辑距离 。

同理，分类与品牌词的识别也可以通过这种方式实现，前提是要建立分类与品牌词库。

用户在PC端通过键盘快速键入关键词搜索时难免输入一些同音或形似错别字，此时如果不作处理的话，用户拿着错误的词很可能检索不到心仪的商品，或者无商品返回，如 黄小明、邀请含等；此时如果能通过搜索提示框帮组用户进行正确的提示，将大大提升用户的查找准度和效率。

搜索的调优不能一直关注技术方面，还要关注用户。搜索质量的好坏是一个比较主观的评价，想要了解用户是否满意搜索结果，只能通过监测搜索结果和用户的行为，例如用户重复搜索的频率，翻页的频次等。

如果搜索能返回相关性较高的文档，用户应该会在第一次搜索便得到想要的内容，如果返回相关性不太好的结果，用户可能会来回点击或尝试新的搜索条件。

ES是一个通用的搜索框架，想要根据业务实现一个专业的搜索平台，还需要进行很多优化，不仅仅是DSL方面的改变。

【实践】仿京东商城小程序（附源码）

  最近学习使用小程序开发开发了一款仿京东商城小程序效果如下：

  仿京东商城小程序基本实现首页搜索、商品分类列表、购物车等功能，项目结构如下：

  购物车功能示例，在pages下创建shoppingCart.wxml文件：

  样式shoppingCart.wxss:

  购物车实现的功能主要有选择商品，加减商品数量、全选、反选、结算等，实现逻辑如下：

仿京东淘宝搜索框实战

搜索框功能主要有3部分组成：

ES官方文档建议通过phrase Suggester实行搜索框的自动补全，但这种查询对中文支持不太友好，经常会不做提示；下面我们通过n-gram来实现符合中国人民使用习惯的提示框。

假设有一个词hello，普通建索引时，就是把这个词hello放入倒排索引

用户输入h、he时会找不到索引(倒排索引中只有hello)，因此匹配失败

而对于输入即搜索这种应用场景，可以使用一种特殊的n-gram，称为边界n-grams (edge n-grams)

所谓的edge n-gram，就是指它会固定从一边开始，进行窗口滑动，每次滑动长度为1，最终的结果取决于 n 的选择长度

以单词hello为例，它的edge n-gram的结果如下：

因此可以发现到，在使用edge n-gram建索引时，一个单词会生成好几个索引，而这些索引一定是从头开始

这符合了输入即搜索的特性，即是用户打h、he能找到倒排中的索引h、he，而这些索引对应著的数据就是hello

需要注意的是，这里使用fuzziness来模糊匹配提升用户体验，fuzziness=1 允许用户输入一个错别字，并通过prefix_length设置为1来跳过开头首个字符的判断，因为一般用户输入出错大多发生在后面

需要注意：

其中min_word_length是用来控制候选词长度的，这里设置为2，意思是当term长度=2才会被显示；

prefix_length=1表示忽略首字符是错别字，大多数输入错别字发生在后面；

min_doc_freq 当建议词出现文档频率低于该值时将被忽略，线上可适当调大该值以提升搜索效果

易企秀商城

在京东的首页中通过查看源找到搜索框的代码如下

这是通过Js来操作提交的。onclick="search('key');return false;" 。点击搜索会触发search()函数，把key传递过去，再处理数据提交。

仿京东搜索框代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于京东搜索框素材、仿京东搜索框代码的信息别忘了在本站进行查找喔。