一、搜素效果如下:

二、核心

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

  2)利用RegExp来对字符串来全局匹配关键字,利用replace方法来对匹配的关键字进行嵌入高亮的<span class="gaoliang">标签,最后利用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"/>

  2)因为input绑定了输入监听事件@input,每一次输入值的改变,都会触发方法searchEvent(),尤其是在输入搜索关键字的时候,这种情况必然发生发送多次http异步请求,这样频繁地请求会导致流量损耗与性能下降。

如何解决?

  我们利用setTimeout与clearTimeout元素,控制输入间隔为500ms,如果超过500s还没输入任何东西,就会向后端发送http异步请求。例如在搜索框种输入1,然后500ms过去之后,就会发送异步请求,如果在输入1之后的500ms输入值,例如我在499ms输入了值‘2’,那么上一次关键字为1的异步请求就会取消,进而进行关键字为‘12’的异步请求,并等待500ms。代码如下:

searchEvent() {
this.clearTimer();
if (this.searchKey && this.searchKey.length > 0) {
//获取当前延时函数的ID,便于后面clearTimeout清除该ID对应的延迟函数
this.timer = setTimeout(() => {
this.$emit('searchHandler', this.searchKey);
}, 500);
} else {
this.$emit('searchHandler', this.searchKey);
}
}, clearTimer() {
if (this.timer) {
clearTimeout(this.timer);
}
}

  注意,你仔细想想,这里还存在一个漏洞。根据关键字发送异步http请求,假如在网络环境并不太好的情况下,异步请求可能经过2秒才返回关键字为‘成’的数据给我。然而,我在输入完关键字‘成’,超过500ms之后在输入‘龙’,那么之前的‘成’关键字的http异步请求已经发送给了服务器(要经过2s才返回数据给我。),而关键字为‘成龙’的http异步请求也发送过去了,它的响应时间是1s就返回数据。那么经过2s之后,得到的将会是关键字为‘成’的数据。因为最新的‘成龙’数据(1s)已经被‘成’数据(2s)所覆盖了。

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

import httpService from '@/services/HttpService';
<script>
export default{
data(){
return{
$http: null,
CancelToken: null,
cancel: null,
}
},
methods{
queryDataListByKey() {
if (this.searchKey.length === 0) {
this.loadedData = false;
this.dataList = [];
return;
} let params = {
'pageNo': this.pageNo,
'pageSize': this.pageSize,
'keyWord': this.searchKey
};
this.loading(true);
              // this.cancel === null,意味着第一次请求
if (this.cancel) {
                   // 取消上一次的异步请求
this.cancel('canceled by user');
}
this.$http.get('rule/findRuleListByKeyWord', {
                   // 每一次请求关键字资源的http异步请求,都要新建一个异步取消操作实例,并赋值给this.cancel
cancelToken: new this.CancelToken((c) => {
this.cancel = c;
}),
'params': params
}).then((res) => {
this.loading(false);
this.loadedData = true;
this.processDataList(res);
}, (error) => {
this.loading(false);
this.loadedData = true;
this.loadMoreConfig.loading = true;
if (error !== null) {
this.$vux.toast.show({ text: '数据加载失败', type: 'text' });
}
});
},
}
}
</script>

  4)v-htmlReg为搜索结果的关键字高亮显示

  这一步是在展示数据的组件上做的。

    4.1)HTML结果数据展示部分

<div class="title-info" v-html="ruleTitle"></div>

    4.2)js部分

import httpService from '@/services/HttpService';
<script>
export default{
props: {
// 每一条带关键字的结果对象,父组件传过来的
item: {},
},
computed: {
ruleTitle() {
let titleString = this.item.name;
if (!titleString) {
return '';
}
if (this.searchValue && this.searchValue.length > 0) {
// 匹配关键字正则
let replaceReg = new RegExp(this.searchValue, 'g');
// 高亮替换v-html值
let replaceString = '<span class="search-text">' + this.searchValue + '</span>';
// 开始替换
titleString = titleString.replace(replaceReg, replaceString);
}
return titleString;
}
},
}
</script>

  

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

  1. Vue.js – 基于 MVVM 实现交互式的 Web 界面

    Vue.js 是用于构建交互式的 Web  界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并 ...

  2. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  3. Vue.js用法详解(一)更新中~

      前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...

  4. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  5. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  6. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  7. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  8. vue.js实战——vue 实时时间

    created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用,需要初始化处理一些数据时会比较有用. mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里 ...

  9. Vue.js——基于$.ajax实现数据的跨域增删查改

    转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...

随机推荐

  1. How Does Closure Work in Javascript?

    Simply, closure is the scope that it can visite and operate the variables outside of the function wh ...

  2. 对状压dp的一点理解

     此dp可以理解为最暴力的dp,因为他需要遍历每个状态,所以将会出现2^n的情况数量,所以明显的标志就是数据不能太多(好像是<=15?),然后遍历所有状态的姿势就是用二进制来表示,01串,1表示 ...

  3. Exception.ToString()使用及其他方法比较

    在日常C#的编码过程中,我们常常会使用try...catch...来抓住代码异常,并且在异常的时候打印log, 如下 try { } catch (Exception e) { //输出Log信息等 ...

  4. 天气预报demo (ShareREC 官网 MobAPI)

    第一步 自己注册一个应用,然后获取里面的 App Key,下载MobAPI SDK 然后拖入 MobAPI.framework 和 MOBFoundation.framework 到你的项目中 官网是 ...

  5. git忽视修改的文件

    对于tracked文件来说,使用.gitignore是不行的.但是git提供了新的方法. 使用命令 git update-index --assume-unchanged <files>, ...

  6. Reids学习2 -- 使用Jedis操作Redis

    1. 如何获取Jedis 获取Jar包可以通过Maven库获取:http://mvnrepository.com/artifact/redis.clients/jedis 或者可以通过Maven配置: ...

  7. SQL Server AlwaysOn搭建

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/高性能解决方案 概述 环境: 域服务器:windows server 2008 R2 SP1,192.168.2.10 DNS:1 ...

  8. 背水一战 Windows 10 (110) - 通知(Tile): secondary tile 模板之基础, secondary tile 模板之文本

    [源码下载] 背水一战 Windows 10 (110) - 通知(Tile): secondary tile 模板之基础, secondary tile 模板之文本 作者:webabcd 介绍背水一 ...

  9. 1.ActionBar

    ActionBar低版本和高版本用法不同 低版本:1. 引用v7-appcompat2. Activity继承ActionBarActivity3. android:theme="@styl ...

  10. 吴恩达机器学习笔记25-神经网络的模型表示2(Model Representation of Neural Network II)

    ( FORWARD PROPAGATION ) 相对于使用循环来编码,利用向量化的方法会使得计算更为简便.以上面的神经网络为例,试着计算第二层的值: 这只是针对训练集中一个训练实例所进行的计算.如果我 ...