vue3 支持输入与搜索的输入框 el-autocomplete组件

csdn: blog.csdn.net/yuxuan89814…

1. 使用el-autocomplete组件

                <el-autocomplete
                    v-model="ruleForm.university"
                    :fetch-suggestions="querySearch"
                    clearable
                    style="width: 220px"
                    class="inline-input w-50"
                    placeholder="Please Input"
                  />

2. querySearch方法

const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value;
  // call callback function to return suggestions
  cb(results);
};
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

3. 下拉框的数据获取 restaurants

const restaurants = ref<RestaurantItem[]>([]);
const getFindUniversity = async () => {
  findUniversity().then((res) => {
    res.data.universityRanks.map((items) => {
      restaurants.value.push({
        value: items.name,
        link: items.id,
      });
    });
  });
};

4. 效果图