Autocomplete in Element Plus introduced by Vue3 framework automatically completes the input box

The function to be realized is to automatically display the content associated with the input box below the input box when entering text in the input box, which is equivalent to a fuzzy query. You can enter directly or click to select the content that appears below. This function is available in Element Plus The Autodcomplete auto-completion input box component inside can be realized, but my vue3 framework language is JavaScript, but the example methods of this component are all Typescript syntax, so I converted it to js syntax mode according to the example, the following is an example, I have introduced element plus through global registration:

<template>
  <div>
       <el-autocomplete
           v-model="zhanghao"
           :fetch-suggestions="querySearch"
           :trigger-on-focus="false"
           clearable
           placeholder="您的账户名和登录名"
           @select="handleSelect"
           style="width:270px;"
        />

  </div>
</template>

<script>

export default {
  name: 'ZhuCeView',
  components: {
  },
  data(){
    return{
        zhanghao:"",//账号
        restaurants:[
            { value: 'vue', link: 'https://github.com/vuejs/vue' },
            { value: 'element', link: 'https://github.com/ElemeFE/element' },
            { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
            { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
            { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
            { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
            { value: 'babel', link: 'https://github.com/babel/babel' },
        ], /*模糊查询的检索列表----模糊检索的字段属性名字必须是‘value’这个属性名，别的属性名不认，如果获取到的呃数组是别的属性名，那处理一下数组给他加个value属性赋值才能用这个方法*/

    }
  },
  methods:{
    //输入框模糊查询方法开始位置######################################
    querySearch(queryString, cb){
        const results = queryString ? this.restaurants.filter(this.createFilter(queryString)) : this.restaurants
        // call callback function to return suggestions
        cb(results)
    },
    createFilter(queryString){
        return (restaurant) => {
            return (
                //restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) == 0
                /*index==0表示是否在第一个索引位置找到输入的字符，*/
                restaurant.value.indexOf(queryString) != -1 //这个语句表示只有有关键字即可，不论在哪个位置匹配到
                
            )
        }
    },
    //输入选定的值
    handleSelect(item){
        console.log("输入选定的对象item:（只有选择了查询列表里面的数据才会触发这个方法）",item)
        console.log("输入框的值zhanghao：",this.zhanghao)
    },
    //输入框模糊查询方法结束位置##########################################
 
  }
 
}
</script>
<style scoped>

</style>