首页
学习
活动
专区
工具
TVP
发布

如何实现搜索的关键词提示功能

当你搜索某一关键词时,它会贴心在下拉补全一些热门关键词,像下图这样: 搜索关键词提示 你点击某一关键词,页面就直接跳转到结果页面,这种显示搜索关键词提示功能,一定程度上节省用户的搜索时间。...但是,在公司内部的很多系统中,搜索中都没有这个功能。如果你能实现这个功能,那么你的用户在使用时肯定会眼前一亮,顿生好感,领导看到后也会给你点赞。...这个功能实现非常简单,前端每输入一个字符,都去后端查询前辍相同的关键词返回到下拉列表中即可。前端的实现网上一搜一大堆,比如搜索关键字「搜索自动补全」就有很多结果,这里就不说了。...github.com/pytries/marisa-trie https://marisa-trie.readthedocs.io/en/latest/tutorial.html 写在最后 上述只实现了搜索智能提示的一小步...其实 Trie 树在自动补全的需求上都可以大显身手,如输入法自动补全功能、IDE 代码编辑器自动补全功能、浏览器网址输入的自动补全功能等。 (完) 专注于有价值的技术分享 欢迎订阅、在看、转发

2.8K20

web学习笔记13-移动端搜索提示功能

最近项目一直在迭代更新,没有什么新的东西做,所以拿出来一个搜索的小模块分享下,功能就是输入关键字能出来相关字的联想吧,删除一些字的时候顺带可以保存上一段的联想,从外观上来看,效果还罢了,这里分享给大家...--搜索结果和搜索历史--> <script src="search.<em>js</em>" type="application...ajaxCache[keyName]){ //显示自动<em>提示</em><em>框</em>,给<em>框</em>里填关联词条的内容 setListPage(ajaxCache[keyName...if(data){ if(data.data){ //显示自动<em>提示</em><em>框</em>...} 这就基本完成了,这里没有加一个<em>搜索</em>结果页,在出现<em>提示</em><em>搜索</em>的时候,应该在上添加点击事件,以跳转到<em>搜索</em>结果页之类的,这边可以根据自己的需求来处理。

52120
您找到你想要的搜索结果了吗?
是的
没有找到

利用js实现输入动态提示信息

为了提高和用户的交互性,现在的输入往往都采用输入信息自动提示功能,类似于百度输入中的提示功能。...设计思路是:在输入input的组件下面放置一个div,这个div主要是为了提示信息的展示功能,类似于下拉那种形式。...步骤二:当用户在输入中输入信息的时候会触发响应函数,函数的主要功能是获取用户的输入值并继续监控用户后续的输入值,然后把输入值进行处理,于缓存中的全局变量进行对比操作,把缓存中相同的部分返回给上面提到过的...步骤三:用户在菜单中选择自己想要的信息,通过js代码实现将选择的信息返回到输入中去。...}); } 输入动态提示信息 输入值: <input id="

14.6K60

Javaweb-案例练习-2-给搜索添加提示

搜索添加搜索提示功能 这篇来利用Ajax做一个给搜索添加搜索提示功能,这个我们在百度首页,搜索随便输入一个字符,就能弹出联想自动,可供用户选择,这篇要做的就是这么一个场景。 1. ...给搜索添加信息提示 在mene_search.jsp中,给搜索先整出一个div来,宽度和搜索的宽度一样,为了显示明显,先来给边框添加红色。...刷新浏览器,看看/index.jsp效果,搜索输入一个J看看,div提示的效果。...下面代码调整之后,可以点击填充到搜索,和解决这个搜索不输入任何字符,提示全量name这个问题。...项目全部代码请看github: 这篇代码的commit message为 “搜索提示并点击填充完成 ”

1.2K41

vue 实现百度下拉提示搜索功能

一、概述 使用百度实现搜索功能,先来看一下效果图 ? 二、代码实现 安装插件vue-resource npm install vue-resource --save 这个插件主要是为了实现this....$http.jsonp()方法 修改main.js,引用vue-resource import VueResource from 'vue-resource' Vue.use(VueResource)...    baidu-search     <input type="text" class="form-control" placeholder="请输入想要<em>搜索</em>关键字...{     list-style: none;     top: 0px;     left: 0px;     right: 0px;   } 说明: get方法实现获取下拉数据和<em>搜索</em><em>功能</em>...,输入keyword之后,调用get方法使用jsonp获取<em>提示</em>数据,然后赋值给myData,然后使用v-for遍历<em>提示</em>数据 然后selectDown和selectUp实现上下选中数据,当按下回车键时,实现<em>搜索</em>

1.6K42

Javaweb-案例练习-2-给搜索添加提示

搜索添加搜索提示功能 这篇来利用Ajax做一个给搜索添加搜索提示功能,这个我们在百度首页,搜索随便输入一个字符,就能弹出联想自动,可供用户选择,这篇要做的就是这么一个场景。 1....给搜索添加信息提示 在mene_search.jsp中,给搜索先整出一个div来,宽度和搜索的宽度一样,为了显示明显,先来给边框添加红色。...刷新浏览器,看看/index.jsp效果,搜索输入一个J看看,div提示的效果。 到这里,还有问题没有解决,那就是点击div中提示,不能点击,我们需要点击之后,自动填充到search。...下面代码调整之后,可以点击填充到搜索,和解决这个搜索不输入任何字符,提示全量name这个问题。...项目全部代码请看github: 这篇代码的commit message为 “搜索提示并点击填充完成 ”

1.1K20
领券