el-autocomplete 组件 实现输入模糊匹配

<template>
  <el-autocomplete
    v-model="value"
    :fetch-suggestions="querySearch"
    placeholder="请输入关键词"
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const value = ref('')
    const suggestions = ref([{value: 'Element'}, {value: 'UI'}, {value: 'Autocomplete'}])
    

    const querySearch = (queryString: string, cb: any) => {
      const results = queryString
        ? suggestions.value.filter(createFilter(queryString))
        : suggestions.value
        cb(results)
    }
    const createFilter = (queryString: string) => {
      return (item:any) => {
        return (
          item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    }

    const handleSelect = (item:any) => {
      console.log(item)
    }

    return {
      value,
	  createFilter,
      querySearch,
      handleSelect,
    }
  },
}
</script>

如果不是自动补全，需要支持模糊匹配代码如下

const createFilter = (queryString: string) => {
      return (item:any) => {
        return (
          item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        )
      }
    }