【Vue.js】基于vue的实时搜索,在结果中高亮显示关键词

一、搜素效果如下:

【Vue.js】基于vue的实时搜索,在结果中高亮显示关键词

二、核心

  1)利用oninput属性来触发搜素功能

  2)利用RegExp来对字符串来全局匹配关键字,利用replace方法来对匹配的关键字进行嵌入高亮的<span>标签,最后利用v-html来嵌入html标签来达到关键字高亮显示

  3)利用axios.CancelToken来终止上一次的异步请求,防止旧关键字查询覆盖新输入的关键字查询结果。

三、代码

  1)HTML  搜索框部分绑定input事件(搜索框独立出来,作为一个基础组件(叫SearchToolbar.vue),嵌入到KnowledgeSearch.vue中)

<input type="text" class="input-search" placeholder="请输入搜索内容" v-model.trim="searchKey" @input="searchEvent" ref="searchInput" autocomplete="off" autocapitalize="off" autocorrect="off"/>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgdysz.html