vue3：input自定义下拉搜索过滤功能，并且防抖

vue3：input自定义下拉搜索过滤功能，并且防抖

一、防抖、节流是什么？

防抖：限制连续触发事件后只执行一次函数
节流：一段时间内只触发一次

二、使用步骤

1.在hooks文件下建useDebonce.ts文件：

代码如下（示例）：

// 创建一个自定义的ref，customRef 是个工厂函数
import { customRef } from 'vue'
export default function useDebonce(initValue: string, delay: number) {
  let timer: any
    // track-依赖追踪，trigger（触发）
  let searchValue = customRef((track, trigger) => {
    return {
      //get何时调用？--searchValue被读取时
      get() {
        track() //告诉vue数据msg很重要，你要对msg进行持续关注，一旦searchValue变化
        return initValue
      },
      //set何时调用？--searchValue被修改时
      set(value) {
       //清除上次定时器
        clearTimeout(timer)
        timer = setTimeout(() => {
          initValue = value
          trigger() //通知vue一下数据变化了
        }, delay)
      }
    }
  })
  return { searchValue }
}

2.监听搜索框的值变化，前端过滤

<div class="search-cont">
  <a-input
    placeholder="输入承运商名称快速搜索"
    v-model:value.trim="searchValue"
    allowClear
    />
</div>
<script lang="ts" setup>
	//引入hooks函数
	import useDebonce from '@/hooks/useDebonce'
	let originData = reactive({
	  initCompanyList: []
	})
	const openSetOrg = () => {
	  //清空搜索框
	  searchValue.value = ''
	  get('/api-user/web/netCompany/getCompanyList').then((res: any[]) => {
	    originData.initCompanyList = [...res] //拷贝一份
	    userInfoStore.companyList = res //下拉结果
	    showSetOrg.value = true
	  })
	}
	const { searchValue } = useDebonce('', 200)
	console.log(searchValue, 'searchValuesearchValue')
	const filterOptions = () => {
      //originData.initCompanyList：接口返回下拉时，拷贝一份作为过滤初始化数据
	  const filteredItems = originData.initCompanyList.filter(
	    item =>
	      item.name.toLowerCase().includes(searchValue.value.toLowerCase()) ||
	      item.simpleName.toLowerCase().includes(searchValue.value.toLowerCase())
	  )
	  // 展示下拉的变量
	  userInfoStore.companyList = filteredItems
	}
	// 监听inputValue变化来过滤选项
	watch(searchValue, filterOptions)
</script>

—![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b5634ea9424b4dd492843349f0c495ae.png#pic_center

总结

提示：
1.获取接口下拉列表时，initCompanyList拷贝一份作为过滤使用，过滤结果赋再值给companyList
2.watch监听searchValue时自动调自定义过滤函数
3.防抖函数封装到hooks里，别的模块调用方便。（有什么问题，请指教）