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

很多项目中会有搜索，有时是要点击搜索按钮时搜索，有时是点击键盘完成搜索，还有时需要实时搜索，而高亮关键字也是一个常见的需求。

今天写一个实时搜索并高亮关键字的微信小程序demo，已上传GitHub，需要自取

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

这是一个我项目中的截图，但是数据结构又略微有点复杂，不好演示，所以单独又写了一个demo，数据来自干活集中营 

实时搜索高亮关键字 
关键函数：将字符串使用关键字分割：

//返回一个使用key切割str后的数组，key仍在数组中
getHilightStrArray: function(str, key) {
),0);">`%%${key}%%`).split'%%');
}

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

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

<view>
normal' }}">{{item}}</text>
2、在自定义组件js中，定义传入key和str的属性对象datas


    /**

    datas{
      observer"_propertyDataChange"
  },

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

      consolelog)
setData({
        searchArray searchArray


}

自定义组件就此完成了

二、在搜索页面使用

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

}

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

<inputfocus'auto'bindinput"searchInputAction"placeholder"输入你要搜索的内容" />

wx:if"{{searchResultDatas.length > 0}}" class="search-content-body">
    "search-result-item">
       "result-item" 
 
data-id'{{item.ganhuo_id}}'
</view>
</view>

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

      url'https://gank.io/api/search/query/'+value '/category/all/count/10/page/1'       // console.log(res)
           valuedesc}
        that({
})
效果：


搜索关键词高亮 

完整微信小程序demo源码已上传GitHub，需要自取，GitHub地址：
微信小程序实时搜索高亮关键字demo
作者：韦弦Zhy 
链接：https://www.jianshu.com/p/86d73745e01c 


                
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。