uni-app：搜索关键词并高亮显示，可重复显示

全部代码：
详情可见：https://ask.dcloud.net.cn/article/35411，根据我的需求修改了匹配的函数和传的数据类型，以及样式

<template><view class="input-group"><input:placeholder="placeholder"@input="search"v-model="name"class="input"/><imagev-if="clearSee"src="/static/casebank/out.png"class="icon_image"@tap="clearInput"></image><view class="ulBorder" v-if="list.length"><view class="ul"><viewclass="li"v-for="(item, index) in list":key="index"@tap="select(index)"><rich-text :nodes="item.name"></rich-text><!-- {{item.name}} --></view></view></view></view>
</template><script>
export default {props: {placeholder: String, //默认提示searchKey: String, //模糊搜索的key值dataSource: {type: Array,default: function () {//数据源return [];},},},data() {return {clearSee: false,list: [],name: "",backName: "",inputValue: "",listOld: [],};},destroyed() {// clearTimeout(this.t);},watch: {name(newV) {if (newV == "") {this.clearSee = false;}},},methods: {search(e) {this.clearSee = true;let val = e.detail.value; //输入框的值this.inputValue = e.detail.value;let { dataSource } = this;let arr = [];for (let i = 0; i < dataSource.length; i++) {if (dataSource[i].name.indexOf(val) !== -1) {arr.push(dataSource[i]);}}if (!val) {this.list = [];} else {this.listOld = arr;this.list = this.drawCorrelativeKeyword(arr, this.inputValue);}},//高亮关键字 keyword：关键词 keywords所有包含关键词的内容drawCorrelativeKeyword(keywords, keyword) {var len = keywords.length,//   console.log(len);keywordArr = [];for (var i = 0; i < keywords.length; i++) {//定义高亮#9f9f9fvar html = keywords[i].name.replace(keyword,"<span style='color: #24BAD1;'>" + keyword + "</span>");html = "<span>" + html + "</span>";var tmpObj = {name: html,};keywordArr.push(tmpObj);}return keywordArr;},select(item) {this.name = this.listOld[item].name;this.list = [];this.$emit("select", this.name);},hideList() {this.list = [];this.t = setTimeout(() => {this.name = this.backName;}, 0);},clearInput() {this.list = [];this.name = "";},},
};
</script><style lang="scss">
.自己写
</style>

uni-app：搜索关键词并高亮显示，可重复显示相关推荐

前端如何实现搜索关键字的高亮显示
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.相关代码最后前言提示:这里可以添加本文要记录的大概内容: 大部分的网站都有做搜索关键词的高亮显示,当搜索的结 ...
android关键词检索功能,Android实现搜索关键词高亮显示-Kotlin
在做Wandroid项目时有一个搜索功能,要在搜索结果中将匹配到的关键词高亮显示.但是玩安卓API并没有提供颜色的高亮,只有字体斜体,效果看起来并不明显,并且昵称也参与了搜索,但并没有增加HTML标 ...
C#中搜索关键词高亮显示
在搜索关键词高亮中一般的方法都是采用替换的办法(Replace)这个方法有一个缺点就是不能区分大小写的问题.在网上找了找发现有人用正则表达式的方法来解决这个问题还真不错,效率也比较高,归纳如下,有用得 ...
JS实现HTM搜索关键词高亮显示
如何利用JS实现HTML搜索关键词高亮显示呢? 目录一.程序案例代码二.程序运行效果一.程序案例代码 <!DOCTYPE html> <html lang="en&q ...
python重复运行程序百度知道_Python多线程采集百度相关搜索关键词工具带exe程序！...
[Python] 纯文本查看复制代码#百度相关搜索关键词抓取,读取txt关键词,导出txt关键词 # -*- coding=utf-8 -*- import requests import re i ...
Vue---实现搜索功能的搜索关键词高亮显示
1.模板代码: <div v-html="hightligth(text)"></div> text为自己的文本搜索结果,比如黄某某例子: 现在我的搜索关 ...
搜索关键词分析——以个人博客网站为例 1
搜索关键词分析--以个人博客网站为例转 https://segmentfault.com/a/1190000018318732 seo 0 背景我做了一个个人博客网站,希望能够记录自己的学习,工作 ...
Trie 树——搜索关键词提示
当你在搜索引擎中输入想要搜索的一部分内容时,搜索引擎就会自动弹出下拉框,里面是各种关键词提示,这个功能是怎么实现的呢?其实底层最基本的就是 Trie 树这种数据结构. 1. 什么是 "Tri ...
Trie 树——搜索关键词提示 1
当你在搜索引擎中输入想要搜索的一部分内容时,搜索引擎就会自动弹出下拉框,里面是各种关键词提示,这个功能是怎么实现的呢?其实底层最基本的就是 Trie 树这种数据结构. 1. 什么是 "Tri ...
app store 关键词
如何选取关键字,让你的应用关键词越来越多? 很多朋友在做应用商店优化的时候,都会遇到一个让人很头疼的问题:如何选取关键词?关键词的质量直接关系到App的自然下载量,所以,我们应该用科学的办法来为您的A ...

uni-app：搜索关键词并高亮显示，可重复显示

uni-app：搜索关键词并高亮显示，可重复显示相关推荐

最新文章

热门文章