业务过程中，一个好的搜索功能必不可少。还啥都想要，又要迷糊搜名字，又要模糊搜手机号。那咱就一下子都给它实现好了。难度就在要标红索引的值。还是需要一点思路想法的。本期说一下搜素功能，下一期直接上一个纯前端实现通讯录的功能尽情期待~~

   先上图：

做出来效果还是非常不错的...

熟悉的我的都懂，直接上代码

<template>
  <div class="contacts-content">
    <div class="search">
      <van-search v-model="staffSearch" @update:model-value="getSearchList()" @focus="getSearchPage(false)" @cancel="getSearchPage(true)" :show-action="!searchStatus" placeholder="搜索成员姓名/手机号"> </van-search>
    </div>
    <div v-show="searchList.length > 0" class="contacts-content-cell" v-for="item in searchList" @click="submit(item)" :key="item.id">
      <img :src="item.photo || group" />
      <div class="cell-info">
        <span class="cell-info-name" :style="data.type && 'color: #EB4D44'" v-for="(data, index) in getSearchProcess(item.name)" :key="index">
        {{ data.val }}
        </span>
        <div>
          <span class="cell-info-tel" :style="data.type && 'color: #EB4D44'" v-for="(data, index) in getSearchProcess(item.telephone)" :key="index">
            {{ data.val }}
          </span>
        </div>
      </div>
    </div>
    <div v-show="searchList.length == 0" class="noData">
      <span v-show="!staffSearch">搜索成员姓名/手机号</span>
    </div>
  </div>
</template>
  
<script setup lang="ts">
  import { ref } from 'vue'
  import group from '@assets/img/teamManagement/group.png'

  const staffSearch = ref<String>('') // 搜索的字符
  const searchList = ref<Array<listType>>([])
  const list = ref<Array<listType>>([
    {
      id: '1',
      name: '小王',
      telephone: '13333333333',
      type: false,
      photo: '',
    },
    {
      id: '2',
      name: '小刘',
      telephone: '13344444444',
      type: false,
      photo: '',
    },
    {
      id: '3',
      name: '小赵',
      telephone: '15555555555',
      type: false,
      photo: '',
    },
    {
      id: '4',
      name: '小李',
      telephone: '15566666666',
      type: false,
      photo: '',
    },
    {
      id: '5',
      name: '小明',
      telephone: '15577777777',
      type: false,
      photo: '',
    },
  ])
  const searchStatus = ref<Boolean>(true) // 搜索的状态， true: 展示最开始的数据  false: 展示搜索的页面

  interface listType {
    id: string
    name: string
    telephone: string
    type: boolean
    photo: string
  }
  /**
   * @param getSearchProcess 对搜索到的数据进行处理  最终其实就是变成一个数组，根据type展示不同颜色就实现了。
   * @param val 获取的数据
   */
  const getSearchProcess = (val: any) => {
    let list = []
    if (val) {
      // 进行姓名或者手机号进行while循环
      while (val) {
        // 如果字符中有和搜索的字符相同的，走以下逻辑
        if (val.indexOf(staffSearch.value) > -1) {
          // 如果相同字符就在第一位序， 是直接push一个搜索的值，打上type: true
          if (val.indexOf(staffSearch.value) == 0) {
            list.push({ val: staffSearch.value, type: true })
            val = val.substr(staffSearch.value.length)
          } else {
            // 否则先把搜索值前面的值先裁剪掉，打上type: false
            list.push({ val: val.substr(0, val.indexOf(staffSearch.value)), type: false })
            // 然后这就到搜索的值了， 打上true。  裁剪掉继续循环
            list.push({ val: staffSearch.value, type: true })
            val = val.substr(val.indexOf(staffSearch.value) + staffSearch.value.length)
          }
        } else {
          list.push({ val: val, type: false })
          val = ''
        }
      }
    }
    return list
  }

  /**
   * @param getSearchPage 是否进入搜索页面
   */
  const getSearchPage = (val: Boolean) => {
    searchStatus.value = val
  }

  /**
   * @param getSearchList 获取选中的数据
   */
  const getSearchList = () => {
    searchList.value = []
    if (staffSearch.value) {
      list.value.map((item: listType) => {
        if (item.name.indexOf(staffSearch.value) > -1 || item.telephone.indexOf(staffSearch.value) > -1) {
          searchList.value.push(item)
        }
      })
    }
  }

  /**
   * @param submit 提交逻辑
   */
  const submit = (val: listType) => {
    console.log(val, '-----------提交-----------')
  }

</script>
<style scoped lang="less">
  .contacts-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #000000;
    .search {
      height: 50px;
      .van-search__content {
        border-radius: 4px;
      }
    }
    &-cell {
      margin-bottom: 8px;
      background: #fff;
      padding: 20px 12px;
      display: flex;
      align-items: center;
      img {
        height: 44px;
        width: 44px;
      }
      .cell-info {
        margin-left: 12px;
        &-name {
          font-size: 16px;
          margin-bottom: 4px;
          color: rgba(0, 0, 0, 0.9);
        }
        &-tel {
          margin-bottom: 4px;
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
    .noData {
      text-align: center;
      margin-top: 50%;
      span {
        opacity: 0.3;
      }
    }
  }
</style>

以下是核心思路

首次加载时

1. 通过getSearchList()进行筛选，根据名字和手机号筛选出模糊搜索的值。

2. 用getSearchProcess()对模糊出来的值进行处理。

   对值进行分割，例：搜索的值为 '44444'， 则处理成[{ val: 1, type:false}, {val: '3333', type: true}, {val: '44444', type: false}]。 通过遍历，把标识type为true的更改颜色，就实现了本功能了。

 以上就是该功能的描述，不清楚的也可以在评论区说，我会进行回复。还是很好玩的小功能。