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

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

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

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

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

实时搜索高亮关键字

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

//返回一个使用key切割str后的数组,key仍在数组中
getHilightStrArray: function(str, key) {
   return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
}
一、新建一个自定义组件,作为显示有高亮字符串的组件

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

<view>
  <text wx:for="{{searchArray}}" wx:key="*this" class="{{item == keyName ? 'highlight' : 'normal' }}">{{item}}</text>
</view>

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

 properties: {
    /**
     * {key:'关键字',name:'待匹配字符串'}
     */
    datas: {
      type: Object,
      observer: "_propertyDataChange"
    }
  },

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

methods: {

    _propertyDataChange: function(newVal) {
      console.log(newVal)
      let searchArray = this.getHilightStrArray(newVal.name, newVal.key)
      this.setData({
        keyName: newVal.key,
        searchArray: searchArray
      })
    },

    getHilightStrArray: function(str, key) {
      return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
    }
  }

自定义组件就此完成了

二、在搜索页面使用

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

{
  "usingComponents": {
    "searchHighlightTextView": "../../component/searchHighlightTextView/searchHighlightTextView"
  },
  "navigationBarTitleText": "搜索"
}

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

<view class="search">
  <input focus='auto' bindinput="searchInputAction" placeholder="输入你要搜索的内容" />
</view>

<!-- 搜索时内容 -->
<view wx:if="{{searchResultDatas.length > 0}}" class="search-content-body">
  <block wx:for="{{searchResultDatas}}">
    <view class="search-result-item">
      <searchHighlightTextView 
       class="result-item" 
       datas='{{searchData[index]}}' 
       bindtap="chooseSearchResultAction" 
       data-id='{{item.ganhuo_id}}'
       />
    </view>
  </block>
</view>

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

  wx.request({
      url: 'https://gank.io/api/search/query/' +value + '/category/all/count/10/page/1',
      data: '',
      success: function (res) { 
       // console.log(res)
        let searchData = res.data.results.map(function(res){
          return { key: value,name:res.desc}
        })
        that.setData({
          searchData,
          searchResultDatas: res.data.results 
        })
     }
效果:

搜索关键词高亮

完整微信小程序demo源码已上传GitHub,需要自取,GitHub地址:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端那些事

Express中间件,看这篇文章就够了(#^.^#)

底层:http模块 express目前是最流行的基于Node.js的web开发框架,express框架建立在内置的http模块上, var http = req...

4216
来自专栏IMWeb前端团队

javaScript 函数节流

本文作者:IMWeb jaychen 原文出处:IMWeb社区 未经同意,禁止转载 ? 什么是javascript函数节流?从其字面意思可以大概猜到...

2307
来自专栏光变

Vim实现批量注释的方法

调试代码的时候,免不了要批量注释/取消代码注释,很多IDE都有快捷键将你选中的…

1001
来自专栏Coding迪斯尼

利用web work实现多线程异步机制,打造页面单步调试IDE

我们已经完成了整个编译器的开发,现在我们做一个能够单步调试的页面IDE,完成本章代码后,我们可以实现下面如图所示功能:

1073
来自专栏流柯技术学院

Selenium的PO模式(Page Object Model)[python版]

首先,我们要分离测试对象(元素对象)和测试脚本(用例脚本),那么我们分别创建两个脚本文件, LoginPage.py 用于定义页面元素对象,每一个元素都封装成组...

3042
来自专栏九彩拼盘的叨叨叨

写爬小说的爬虫的一些心得

小说网站的页面内容编码用的 GBK,如果不做处理,中文内容会是乱码。解决方案是用 iconv-lite 来对内容用 GBK 的方式来解码。大概的写法:

1273
来自专栏搞前端的李蚊子

微信返回码说明

返回码说明 返回码    说明 -1     系统繁忙 0     请求成功 40001     验证失败 40002     不合法的凭证类型 40003  ...

3486
来自专栏超然的博客

前端必知的ajax

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

1454
来自专栏Python

vim显示行号、语法高亮、自动缩进的设置

1462
来自专栏蘑菇先生的技术笔记

探索c#之storm的TimeCacheMap

2147

扫码关注云+社区