当前位置：首页 > VUE

vue实现autocomplete

2026-01-07 07:43:18VUE

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 组件库：

vue实现autocomplete

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>

PrimeVue AutoComplete

vue实现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)
      }
    }
  }
}

性能优化建议