elementui autoselect

ElementUI 的自动完成选择功能

ElementUI 提供了 el-autocomplete 组件来实现自动完成选择功能。该组件允许用户输入内容时，根据输入值动态匹配并展示候选选项，提升用户输入效率。

基本用法

通过 v-model 绑定输入值，fetch-suggestions 属性指定获取建议项的方法。以下是一个简单示例：

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

<script>
export default {
  data() {
    return {
      inputValue: '',
      suggestions: []
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.suggestions.filter(item => 
            item.value.toLowerCase().includes(queryString.toLowerCase())
          )
        : this.suggestions
      cb(results)
    },
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>

自定义模板

可以通过 scoped slot 自定义建议项的显示模板：

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

远程搜索

结合后端 API 实现远程搜索功能：

methods: {
  querySearch(queryString, cb) {
    if (queryString) {
      axios.get('/api/search', { params: { q: queryString } })
        .then(response => {
          cb(response.data)
        })
    } else {
      cb([])
    }
  }
}

配置项说明

• v-model: 绑定输入值
• fetch-suggestions: 获取建议项的方法，需调用回调函数返回结果
• debounce: 输入延迟毫秒数，默认300
• placement: 下拉菜单弹出位置
• trigger-on-focus: 是否在输入框聚焦时显示建议列表

注意事项

1. 确保 fetch-suggestions 方法调用了回调函数，否则建议列表不会显示
2. 远程搜索时建议添加防抖处理，减少不必要的请求
3. 自定义模板时，确保每个建议项有唯一的 value 属性
4. 可通过 CSS 自定义下拉列表的样式

以上是 ElementUI 自动完成选择功能的基本实现方式，根据实际需求可以进一步扩展和定制。