微信小程序实现搜索关键词高亮的示例代码

1，前言

项目中碰到一个需求，搜索数据并且关键词要高亮显示，接到需求，马上开干。先上效果图。源码已经做成了小程序代码片段，放入了github了，文章底部有源码链接。

2，思路

博主第一时间想到的就是使用split，根据搜索的关键词，处理后台返回的数据，然后indexof找到关键字，给每个字添加deep字段，deep为true，则高亮，为false，则正常。由于是小程序，所以楼主直接做成了一个高亮组件，代码很简单，实现步骤如下。

3，代码逻辑

模拟数据如下

在data中定义了一个空数组，用于存放根据搜索key过滤后的数据

搜索的wxml和方法

定义了一个高亮组件highlight

在页面中将搜索出来的每一项item和key参数传递给组件

在组件中接收

组件的初始数据

组件的wxml

组件的高亮数据处理

源码github地址：https://github.com/pdd11997110103/componentwarehouse

到此这篇关于微信小程序实现搜索关键词高亮的示例代码的文章就介绍到这了,更多相关小程序搜索关键词高亮内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！