elementui auto

Element UI AutoComplete 组件

Element UI 的 AutoComplete 组件是一个输入框的自动完成功能，用户输入时会出现下拉建议。适用于需要快速输入或搜索的场景。

基本用法

通过 v-model 绑定输入值，fetch-suggestions 属性设置获取建议的方法。

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>

data() {
  return {
    restaurants: [],
    state: ''
  }
},
methods: {
  querySearch(queryString, cb) {
    var restaurants = this.restaurants;
    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    cb(results);
  },
  createFilter(queryString) {
    return (restaurant) => {
      return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    };
  },
  handleSelect(item) {
    console.log(item);
  }
}

远程搜索

结合远程接口实现搜索建议。

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>

methods: {
  querySearchAsync(queryString, cb) {
    axios.get('/api/search', { params: { query: queryString } })
      .then(response => {
        cb(response.data);
      });
  }
}

自定义模板

通过 scoped slot 自定义下拉项的显示内容。

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
>
  <template #default="{ item }">
    <div class="name">{{ item.value }}</div>
    <span class="addr">{{ item.address }}</span>
  </template>
</el-autocomplete>

禁用状态

设置 disabled 属性可以禁用自动完成。

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  disabled
></el-autocomplete>

清除按钮

添加 clearable 属性可显示清除按钮。

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  clearable
></el-autocomplete>

事件

常用事件包括 select（选中建议项时触发）和 change（输入值变化时触发）。

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  @select="handleSelect"
  @change="handleChange"
></el-autocomplete>

属性

主要属性包括 value-key（指定建议对象的键名）、debounce（输入去抖延迟）等。

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  value-key="name"
  :debounce="300"
></el-autocomplete>

以上是 Element UI AutoComplete 组件的常见用法和配置选项，可以根据实际需求进行调整。