支付宝小程序中实现搜索输入提示关键字高亮显示

最新推荐文章于 2024-07-03 17:05:23 发布

Mr.Leer

最新推荐文章于 2024-07-03 17:05:23 发布

阅读量922

点赞数 1

文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/qq_43498860/article/details/121554067

版权

本文介绍了如何在支付宝小程序中实现搜索输入时的关键字高亮显示。通过处理后台返回的提示信息，对数据进行加工，并解决提示词之间逗号隔开的问题，最终实现关键词的无缝显示。

摘要由CSDN通过智能技术生成

效果如下图所示

输入框输入关键字后台返回的提示信息

直接上代码对请求得到的数据进行处理


  // 高亮搜索关键字
  searchTap() {
    // 分割函数
    let getInf = (str, key) => str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
    let hint = this.data.hint
    for (var i = 0; i < hint.length; i++) {
      var dic = hint[i];
      var text = dic.keyName;
      // getInf(后台返回的字符串, 输入的关键字)
      dic.keyName = getInf(text, this.data.content);
    }
    this.setData({
      hint
    });
  },