模糊搜索关键字高亮

前端实现模糊搜索关键字高亮，借助计算属性computed实现，没有结合防抖函数，不知道怎么加入，如果有大佬知道怎么实现，可在评论区留言

使用深拷贝数组，可结合防抖函数，就是代码多了点。

1.获取筛选后的数据

const dataList = ref<dataType[]>([]);
const keyWrods = ref<string>(''); // 搜索关键字
const filterList = computed(() => {
    return dataList.value.filter((item: dataType) =>
      item.storeName.toLowerCase().includes(keyWrods.value.toLowerCase()),
    );
});

2.实现高亮

  const highlight = (item: string) => {
    const regex = new RegExp(keyWrods.value, 'gi');
    return item.replace(regex, (match) => `<span style="color:#113969">${match}</span>`);
  };

3. html 代码实现

//搜索框
<input type="text" v-model="keyWrods" />
// 循环数据
<div class="list-card" v-for="item in filterList" :key="item.key">
    <div class="list-card-name" v-html="highlight(item.storeName)"></div>
    <div class="list-card-addr">{{ item.storeAddress }}</div>
</div>

含有防抖函数实现

debounce函数可查看 小工具集合

 <input type="text" v-model="keyWrods" @input="inputSearch" />

// debounce
 const inputSearch = debounce(() => {
    // 搜索
    console.log('key', keyWrods.value);
  }, 500);