微信小程序搜索结果文字匹配变色

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

huang_jimei

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

阅读量542

点赞数 1

文章标签：微信小程序

本文链接：https://blog.csdn.net/huang_jimei/article/details/130079295

版权

一、搜索结果匹配变色如图
在这里插入图片描述
二、代码
1、wxml

<view class="list">
      <text>*</text>企业名称
      <input type="text" placeholder="请输入企业名称"  placeholder-class="placeholder-style" bindinput="companyInput" bindblur="conpanyBindblur"/>
    </view>
    <!-- 模糊搜索 -->
    <view class="company" wx:if="{{componyShow}}" >
      <view class="clist" wx:for="{{comlist}}" wx:key="key"><rich-text class="rich" nodes="{{item.name}}"></rich-text> </view>
    </view>
    <!-- 模糊搜索结束 -->

2、js

data:{
    companyName: '', //实习企业名称
    componyShow: false, //模糊搜索结果显示与否
    comlist:[],//用于显示模糊搜索结果
    company: [{
      name: '东莞市天蓝培训中心有限公司',
      id: '121'
    }, {
      name: '东莞市清溪乐亚美幼儿园',
      id: '122'
    }, {
      name: '东莞市莞御科技有限公司',
      id: '123'
    }, {
      name: '全喜自动化科技有限公司全喜自动化科技有限公司全喜自动化科技有限公司全喜自动化科技有限公司',
      id: '123'
    }, {
      name: '东莞市贝贝甜心幼儿园',
      id: '123'
    }, {
      name: '东莞市全知技术有限公司',
      id: '123'
    }, {
      name: '东莞市天蓝培训中心有限公司',
      id: '123'
    }], //模糊搜索结果
},
 // 企业名称
  companyInput(e) {
    this.setData({
      companyName: e.detail.value
    })
    if (this.data.companyName != '') {
      this.setData({
        componyShow: true
      });
      //重点代码，进行替换
      var ncom=this.data.company.map((o) => ({'name': o.name.replace(this.data.companyName, "<span style='color:#F68058;'>" + this.data.companyName + "</span>"), 'id': o.id}));
      this.setData({
        comlist: ncom
      });
    } else {
      this.setData({
        componyShow: false
      })
    }
  },
  // 实习企业失去焦点
  conpanyBindblur() {
    this.setData({
      componyShow: false
    })
  },