基于Vue实现关键词实时搜索高亮显示关键词

最近在做移动real-time-search于实时搜索和关键词高亮显示的功能，通过博客的方式总结一下，同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上，可以clone下来直接看代码 https://github.com/IT0315/real-time-search.git 下面是demo运行的效果图 好了闲话不多说直接上代码 实时搜索 实时搜索通过触发input事件和定时器来实现 &lt;input v-model="keyWords" type="text" placeholder="请输入关键词" @input="handleQuer 在本文中，我们将探讨如何基于Vue.js框架实现一个实时搜索功能，并且在搜索结果显示时高亮显示关键词。这个功能在很多应用中都很常见，比如搜索引擎、聊天应用或者任何需要即时反馈用户输入的应用。 实时搜索的核心是监听用户的输入事件，并在合适的时间间隔内触发查询。在Vue中，我们可以使用`v-model`指令来双向绑定输入框的值，并通过`@input`监听输入事件。当用户在输入框中输入内容时，`handleQuery`方法会被调用。在这个方法中，我们使用一个定时器来控制搜索的频率，防止频繁发送请求，可能导致不必要的性能消耗。`clearTimer`方法用于清除当前的定时器，确保每次新的输入都只触发一次搜索请求。例如： ```javascript <input v-model="keyWords" type="text" placeholder="请输入关键词" @input="handleQuery"> methods: { clearTimer () { if (this.timer) { clearTimeout(this.timer) } }, handleQuery (event) { this.clearTimer() // ... }, } ``` 在`handleQuery`方法中，我们使用了一个2秒的延迟来确保只有在用户停止输入2秒后才会发送搜索请求。这样做可以避免连续输入时多次触发请求，从而优化用户体验。 对于搜索结果的处理，我们通常会从服务器获取数据，然后将其显示在页面上。在这个例子中，假设我们通过HTTP POST请求获取数据，并将结果存储在`results`数组中。为了高亮显示匹配的关键词，我们需要遍历每条结果，使用正则表达式查找并替换关键词。Vue.js 提供了 `v-html` 指令，允许我们将HTML字符串插入到DOM中。这样，我们就可以将关键词包裹在带有特定CSS类的`<span>`标签中，从而实现高亮效果。例如： ```javascript methods: { changeColor (resultsList) { resultsList.forEach(item => { if (this.keyWords && this.keyWords.length > 0) { const replaceReg = new RegExp(this.keyWords, 'g') const replaceString = '<span class="search-text">' + this.keyWords + '</span>' item.name = item.name.replace(replaceReg, replaceString) } }) this.results = resultsList }, } ``` 在模板中，我们遍历`results`数组并使用`v-html`将处理后的名称显示出来： ```html <ul> <li v-for="(item, index) in results" :key='index' v-html='item.name'></li> </ul> ``` 为了防止旧关键字查询覆盖新输入的关键字查询结果，特别是当服务器响应时间较长时，我们可以使用axios库的CancelToken特性取消之前的请求。然而，这个话题超出了本文的范围，但你可以查阅axios的文档来了解如何实现这个功能。 基于Vue.js实现关键词实时搜索高亮显示涉及监听用户输入、控制搜索频率、处理搜索结果以及使用正则表达式和`v-html`实现高亮显示。通过这种方式，你可以创建一个高效且用户体验良好的实时搜索功能。