当前位置：首页 > news >正文

element-plus中Autocomplete自动补全输入框组件的使用

news 来源：原创 2025/5/25 14:37:40

1.基本使用

①从官网赋值如下代码

②查看运行效果

③代码解读

2.调用后端接口，动态获取建议数据

结语

1.基本使用

①从官网赋值如下代码

<template>
<div>
  <!-- 自动补全输入框 -->
  <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearch"
    :trigger-on-focus="false"
    clearable
    style="width:300px;"
    placeholder="请输入内容"
    @select="handleSelect"
  />

</div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

//动态绑定自动补全输入框的值
const state = ref('');

//存储建议列表的数据源，初始为空数组。
const restaurants = ref([]);

//根据用户输入的内容（queryString）过滤建议列表。如果用户没有输入内容，则返回所有建议项。调用 cb(results) 将过滤后的结果传给 el-autocomplete 组件。
const querySearch = (queryString, cb) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value;
  cb(results);
};

//创建一个过滤器函数，用于匹配用户输入的内容。检查建议项的 value 是否以用户输入的内容开头（不区分大小写）。
const createFilter = (queryString) => {
  return (restaurant) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};


//自定义函数loadAll，用来返回输入框自动补全时建议的数据
const loadAll = () => {
  //所有可能匹配的选项。（注意：每一个选项都是一个对象，构成这个对象数组）
  return [
    { value: 'vue' },
    { value: 'element' },
    { value: 'cooking' },
    { value: 'mint-ui' },
    { value: 'vuex' },
    { value: 'vue-router' },
    { value: 'babel' },
  ];
};

//选中自动输入框的建议时，触发的事件
const handleSelect = (item) => {
  //item是我们选中的建议中的那个选项（是一个对象）
  alert(JSON.stringify(item));
};

//element-plus组件加载完成后，调用 loadAll函数 初始化 restaurants 数据（我们可以在这个函数内，发送axios请求后端，获取数据，此时就不需要通过loadAll函数来获取数据了）
onMounted(() => {
  restaurants.value = loadAll();
});
</script>

<style scoped>

</style>