vue实现autocomplete

Vue 实现 Autocomplete 功能

Vue 中实现 Autocomplete（自动完成）功能可以通过自定义组件或使用现有库完成。以下是几种常见方法：

方法一：使用 Vue 原生实现

创建自定义 Autocomplete 组件，监听输入框变化并匹配数据。

<template>
  <div class="autocomplete">
    <input 
      v-model="searchText" 
      @input="onInputChange" 
      @focus="showSuggestions = true"
    />
    <ul v-if="showSuggestions && filteredItems.length">
      <li 
        v-for="(item, index) in filteredItems" 
        :key="index"
        @click="selectItem(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      showSuggestions: false,
      items: ['Apple', 'Banana', 'Orange', 'Mango'],
      filteredItems: []
    }
  },
  methods: {
    onInputChange() {
      this.filteredItems = this.items.filter(item => 
        item.toLowerCase().includes(this.searchText.toLowerCase())
      )
    },
    selectItem(item) {
      this.searchText = item
      this.showSuggestions = false
    }
  }
}
</script>

<style>
.autocomplete {
  position: relative;
}
.autocomplete ul {
  position: absolute;
  border: 1px solid #ddd;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}
.autocomplete li {
  padding: 8px;
  cursor: pointer;
}
.autocomplete li:hover {
  background-color: #f5f5f5;
}
</style>

方法二：使用第三方库

Vue 生态中有多个成熟的 Autocomplete 组件库：

1. vue-autosuggest

   npm install vue-autosuggest

   示例用法：

   <template>
     <vue-autosuggest
       :suggestions="filteredOptions"
       @input="onInputChange"
       @selected="onSelected"
     >
       <input slot-scope="{ inputProps }" v-bind="inputProps">
     </vue-autosuggest>
   </template>

2. PrimeVue AutoComplete

   

   npm install primevue

   示例用法：

   <AutoComplete 
     v-model="selectedItem" 
     :suggestions="filteredItems"
     @complete="searchItems($event)"
   />

方法三：与后端 API 集成

当需要从服务器获取建议时，可以使用 axios 进行 API 调用：

methods: {
  async onInputChange() {
    if (this.searchText.length > 2) {
      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchText }
        })
        this.filteredItems = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}

性能优化建议

• 添加防抖（debounce）减少频繁 API 调用
• 使用虚拟滚动（vue-virtual-scroller）处理大量数据
• 添加加载状态指示器
• 实现键盘导航支持（上下箭头选择）

以上方法可根据具体需求选择，简单场景可使用原生实现，复杂场景推荐使用成熟库。