微信小程序实现实时搜索并高亮关键字的功能效果
一、效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2fcee50262478f6630c2844736440c72.png)
二、实现流程:
- 1.在文本框中输入关键字key,如“比赛”,检索出比赛相关的列表
key = 小程序
- 2.处理结果列表:在key的前后加分隔符,如“%%”
- 3.通过第2步的分隔符进行切割,获取新的数组:str.split("%%")
- 4.页面for循环上面的新数组:与key相等,则高亮显示,否则常规样式显示
三、代码实现
1.search-effects.js 部分代码:
Page({
data: {
searchText:'',
searchResultList:[],
autoFocus: true,
holdKeyboard: true
},
onReady: function () {
},
input(e){
this.setData({
searchText:e.detail.value.trim()
})
this.getSearchListByName()
},
getSearchListByName(){
let that = this
var dataList=[
{
M_NAME:'小程序教程'},
{
M_NAME:'2020小程序大全'},
{
M_NAME:'微信小程序开源框架'},
{
M_NAME:'微信小程序组件化解决方法'},
{
M_NAME:'微信小程序API'},
{
M_NAME:'丰富的微信小程序组件'},
{
M_NAME:'第三方微信小程序组件'},
{
M_NAME:'自定义小程序UI组件'},
{
M_NAME:'小程序可滑动标签的使用'}
]
var searchResultList = []
for(var i=0;i<dataList.length;i++){
let obj={
M_NAME:dataList[i].M_NAME
}