微信小程序实时搜索并高亮关键字

实时搜索高亮关键字

关键函数：将字符串使用关键字分割：

一、新建一个自定义组件，作为显示有高亮字符串的组件

1、在自定义组件wxml中循环数组并判断是否是关键字然后设置不同的class，代码如下：

2、在自定义组件js中，定义传入key和str的属性对象datas

开始是单独传入key和name，表现正常，但是发现在某些特殊情况得不到想要的结果，这里就不列出来了，有兴趣的朋友可以自己尝试。
3、在自定义组件js中，处理传入的数据

自定义组件就此完成了

二、在搜索页面使用

1、在json文件中引入自定义组件

2、在搜索页面wxml中编写，和自定义组件：

3、在搜索页面获取输入内容并请求网络赋值，这里有个关键点我们使用的datas是一个Object，所以在获取到数据中先组这个Object:

效果：

搜索关键词高亮

本文地址：http://mdekt.bhha.com.cn/quote/65.html    康宝晨资讯 http://mdekt.bhha.com.cn/ , 查看更多

特别提示：本信息由相关企业自行提供，真实性未证实，仅供参考。请谨慎采用，风险自负。