要实现的功能是在输入框输入文字的时候在输入框下面自动出现与输入框相关联的内容，就相当于模糊查询，可以直接输入，也可以点击选择下面出现的内容，这个功能在Element Plus里面的Autodcomplete 自动补全输入框组件可以实现，但是我的vue3框架语言选择的是JavaScript，但是这个组件的示例方法都是Typescript语法，所以我根据示例转换成了js的语法模式，下面是示例，element plus我已经全局注册引入了:

<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>