前端实现搜索

前端搜索

<view class="school-item" v-for="item in filterList" :key="item.tenantNo" @click="clickTenantItem(item)">
  <image class="school-icon-l" :src="item.schoolLogoUrl" />
  <text class="school-text">{{ item.tenantName }}</text>
  <view class="school-icon-r">
    <u-icon name="arrow-right" size="32rpx" color="#696D7F"></u-icon>
  </view>
</view>



data() {
  return {
    originList: [],
    filterList: []
  }
},

created() {
  this.getData();
},

methods: {
  getData() {
    const list = [];
    for (let i = 1; i < 10; i++) {
      list.push({
        id: i,
        schoolName: '姓名-' + '学号'.repeat(i),
        schoolLogoUrl: `schoolUrl/${i}.png`
      });
    }
    this.originList = list;
    this.filterData();
  },
  filterData() {
    this.filterList = this.searchVal ? this.originList.filter(item => (item.schoolName || '').indexOf(this.searchVal) !== -1) : this.originList
  }
}



.tenant {
  color: #000;
  &-list {
    display: flex;
    flex-direction: column;
    row-gap: 30rpx;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-item:active {
      color: red;
    }
    &-icon-l {
      display: block;
      height: 64rpx;
      width: 64rpx;
    }
    &-text {
      flex: 1;
      margin: 0 10rpx 0 20rpx;
      font-size: 24rpx;
      line-height: 24rpx;
    }
  }
}