前端实现搜索联想时防抖功能:

1.原因:

 在输入搜索文本时,会不停的调用接口,消耗大量性能=>引入js中Loadsh工具类来解决

Loadsh工具官网

2.案例使用:

[1]安装依赖

npm i --save lodash

[2]引入使用

<script>
import { debounce } from 'lodash' //js工具类,按需加载export default {name: 'SearchSuggestion',props: {searchText: {type: String,required: true}},data() {return {suggestionsList: [],}},watch: {searchText: {// 当searchText发生改变,调用handler函数(名称固定)// handler(value) {//     this.getSearchSuggestionsList(value)// },/* 优化防抖debounce函数:参数一:一个函数参数二:延迟时间,单位毫秒返回值:防抖之后的函数*/handler: debounce(function (value) {this.getSearchSuggestionsList(value)}, 1000),immediate: true, //侦听之后立即被调用}},created() {},methods: {// 获取联想推荐列表async getSearchSuggestionsList(value) {try {// const  {res}=await  getSearchSuggestions(value)this.suggestionsList = [{ content: '1', url: 'https://www.baidu.com/?tn=02003390_25_hao_pg' },{ content: '2', url: 'https://www.baidu.com/?tn=02003390_25_hao_pg' },{ content: '3', url: 'https://www.baidu.com/?tn=02003390_25_hao_pg' },{ content: '4', url: 'https://www.baidu.com/?tn=02003390_25_hao_pg' },{ content: '5', url: 'https://www.baidu.com/?tn=02003390_25_hao_pg' },]console.log(value)} catch (error) {this.$toast('数据获取失败,请稍后重试')}},}
}
</script>

前端实现搜索联想时防抖功能:相关推荐

javascript搜索框联想搜索_JavaScript实现搜索联想功能
-.虽然Jquery已经有了一个完整的包实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性回想起来实现此功能很简单,1.前端输入字符串文本改变异步请求服务器将返回的资料显示 ...
规划搜索产品时，我们可以如何着手？
搜索,曾经作为PC互联网时代的流量霸主,有着举足轻重的地位.即使在如今APP孤岛林立的移动互联时代,站内搜索仍然是提升产品触达与流量转化的重要部件,譬如业界有流传电商App 40%以上的GMV通过搜索 ...
前端实现搜索功能和模糊查询
前端实现搜索功能和模糊查询功能介绍: 在前端实现搜索,获取数据部分可以用ajax来实现,动态生成li标签,正则表达式实现的模糊查询 js实现代码: // $("#BA_2307596970 ...
solr5使用suggest模块实现搜索联想
一.概述 Solr从1.4开始便提供了检查建议,检索建议目前是各大搜索的标配应用,主要作用是避免用户输入错误的搜索词,同时将用户引导到相应的关键词搜索上.通常,我们将其称为搜索联想.其效果如图所示.在 ...
Ajax实现搜索联想自动补全
什么是搜索联想?自动补全? .百度是一个很典型的代表.在百度的搜索框中输入相关信息的时候,会有搜索联想以及自动补全. .搜索联想和自动补全:实际上是为了方便用户的使用.让用户的体验更好. .搜索联想: ...
android mysql 搜索功能_android利用数据库实现搜索联想功能
[实例简介] android利用数据库实现搜索联想功能.主要实现的效果是和google百度搜索一样,实现联想功能. [实例截图] [核心代码] 4e431bd8-d287-4028-8476-7510 ...
php 实现联想式搜索,PHP实现搜索联想功能（基于字典树算法）
搜索联想功能是各大搜索引擎具备的基础功能,如下图所示,这个功能简化了用户的输入行为,并且能够给用户推荐热门的搜索词,下面我们来讲一下如何用php实现搜索联想的功能. 实现原理搜索联想功能拆解一下由两 ...
Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）
搜索联想建议 1. 基本思路: 当搜索框输入内容的时候,请求加载联想建议的数据将请求得到的结果绑定到模板中 2. 基本功能一.将父组件中搜索框输入的内容传给联想建议子组件二.在子组件中监视搜索框 ...
当人们流行“炮轰”联想时：没想到的联想
如果你看懂了联想,你就看懂了中国IT企业.如果你了解联想的过去,就一定理解联想的今天.生于忧患,死于安乐.联想的忧患意识使她日渐成熟.今天的业绩表明,联想还是一个好公司,她依然强大,依然生气勃勃.从& ...
前端开发审查元素时CSS样式有个横线（该CSS样式定义后无效）的解决办法
问题概述关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法左看右看,上看下看,最终发现是前面在编码 ...

前端实现搜索联想时防抖功能:

1.原因:

2.案例使用:

前端实现搜索联想时防抖功能:相关推荐

最新文章

热门文章