Macro Da

每天学一点,成长多一点!

微信小程序实现搜索结果“关键词”高亮效果

为更好用户体验及设计效果,搜索结果列表都是需要对关键词进行高亮显示的,对关键词进行“<text class='high'>关键词</text>”样式定义,如果通过服务端返回wxml格式,在页面是不会被解析的,直接显示代码了,所以就需要在前端进行处理,先附上代码:

JS代码:

// pages/test/index.js
 
// 分割函数
const getInf = (str, key) => str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    keyword: '',
 
    // 定义测试数据
    listData: [ ]
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     
  },
 
  // 高亮搜索关键字
  searchTap: function () {
    var listData = [
      { title: "中国人5000年前就会酿啤酒" },
      { title: "黄萼裳裳绿叶稠,千村欣卜榨新油黄萼裳裳绿叶稠,千村欣卜榨新油" },
      { title: "文明悠久灿烂,丝绸之路北线从此出中亚,自古为兵家必争之地" },
      { title: "中国人5000年前就会酿啤酒" },
      { title: "黄萼裳裳绿叶稠,千村欣卜榨新油黄萼裳裳绿叶稠,千村欣卜榨新油" },
      { title: "文明悠久灿烂,丝绸之路北线从此出中亚,自古为兵家必争之地" }
    ];
    for (var i = 0; i < listData.length; i++) {
      var dic = listData[i];
      var text = dic.title;
      dic.title = getInf(text, this.data.keyword);
    }
    this.setData({
      listData: listData
    });
     
  },
 
  //提交表单搜索
  searchSubmit: function (e) {
    var keyword = e.detail.value.keyword;
    if (keyword == '' || keyword == null) {
      wx.showToast({
        title: '请输入搜索关键词',
        icon: 'none'
      })
    } else {
      // 赋值关键词
      this.setData({
        keyword: keyword
      });
 
      // 执行高亮关键字函数
      this.searchTap();
    }
  },
 
})

wxml代码:

<!--pages/test/index.wxml-->
<form bindsubmit="searchSubmit">
    <input type='text' name="keyword" class="input-text" confirm-type="search" value="{{keyword}}" placeholder="请输入搜索关键字" />
    <button type="primary" form-type='submit'>搜索</button>
</form>
 
<view wx:for="{{listData}}" wx:key="title" wx:for-index="index" class="item">
  <view>
    <text wx:for="{{item.title}}" wx:key="title" class="{{item == keyword ? 'high' : '' }}">{{item}}</text>
  </view>
</view>

CSS代码:

/* pages/test/index.wxss */
.input-text{ background: #eee; border: 1px solid #ccc; background: #f5f5f5; padding: 10px 20px; margin: 10px; }
.item{ border: 1px solid #ccc; padding: 10px; margin: 10px; }
.high{ background: #ffffae; color: #f00; }

原理是,对列表中标题切割为数组,切割字符串为输入的关键词,然后在页面循环列表中增加循环标题数组,如果和关键词一致,则添加上高亮代码,最后增加样式优化高亮效果,最终效果如下:

《微信小程序实现搜索结果“关键词”高亮效果》
效果演示
点赞

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注