自动补全输入框-el-autocomplete

第一次使用记录

 <el-autocomplete
      class="flex"
      style="margin-right:20px"
      v-model="config.seach"
      :fetch-suggestions="querySearch"
      popper-class="my-autocomplete"
      placeholder="请输入股票代码或名称"
      @select="handleSelect"
      clearable
    >
   <template #default="{ item }">
     <div class="value">{{ item.value }}</div>
     <span class="link">{{ item.label }}</span>
   </template>
 </el-autocomplete>

interface LinkItem {
  value: string
  label: string
}
let config=reactive({
   basicList:[{ label: 'Timmy', value: '000001.SH' },
            { label: 'Judd', value: '2' },
            { label: 'Dequan', value: '3' },
            { label: 'Olin', value: '4' },
            { label: 'Bear', value: '5' },
            { label: 'Caesar', value: '6' },
            { label: 'Davi', value: '7' },
            { label: 'Wisdom', value: '8' },
            { label: 'Pavel', value: '9' },
            { label: 'Alain', value: '10' }]
         })
  const querySearch = (queryString: string, cb) => {
    const results = queryString
      ? config.basicList.filter(createFilter(queryString))
      : config.basicList
    // call callback function to return suggestion objects
    cb(results)
  }
  const createFilter = (queryString:string) => {
    return (restaurant:LinkItem) => {
      let str=restaurant.value+restaurant.label;
      return (
        str.toLowerCase().indexOf(queryString.toLowerCase()) != -1
      )
    }
  }

  const handleSelect = (item: LinkItem) => {
    console.log(item)
    config.seach=item.value
  }