vue 使用 element-ui 的 el-autocomplete 组件自定义内容 实现输入框自动提示查 加实时请求。

输入的’测试’后台没有相应数据。

1 html里

 <el-autocomplete
	         v-model="state1"
	          popper-class="my-autocomplete"
	          :fetch-suggestions="querySearch"
	          placeholder="请输入内容"
	          @select="handleSelect"
       	>
          	<template slot-scope="{ item }">
                <div class="name">{{ item.nickname }}</div>
         	</template>
  	</el-autocomplete>

2 return 里定义所需的 字段

 data() {
   return {
    		restaurants: [],  // 请求到回显数组
            state1: '',
 }

3 watch 方法里 实时监听 state1 里输入的内容

 watch: {
            // 搜索 送积分的 名字展示
             state1: function (val) {
                this.state1 = val;
                // console.log(val)
                // console.log( this.state1)
                 this.factSearch();  //  请求后台接口方法
            },
        },

4 methods 里输入所需的方法 官网也有

 querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {        		  return(restaurant.nickname.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                 console.log(item,1);
            },
// 请求后台接口
  factSearch(){
         this.$api.post("url", {
                //  参数
            }) .then((res) => {
                   //返回的数据
                   if (res.code === 200) {
                        this.restaurants = res.data; 
                   } else {
                       this.$message({
                           message: "暂无",
                           type: "error",
                       });
                   }
               })
               .catch((e) => {
                   console.log(e);
               });
       },

官网链接 https://element.eleme.io/#/zh-CN/component/input[官网链接]
(https://element.eleme.io/#/zh-CN/component/input)

如有问题或更好的方法随时沟通!