当前位置：首页 > VUE

vue实现autocomplete

2026-03-06 23:02:37VUE

Vue 实现 Autocomplete 的方法

基础实现（使用原生 HTML 和 Vue 指令）

通过 v-model 绑定输入框的值，利用 v-for 渲染匹配的候选项列表。监听输入事件过滤数据，并通过 v-show 控制下拉列表的显示。

<template>
  <div>
    <input 
      v-model="inputValue" 
      @input="filterOptions"
      @focus="showDropdown = true"
      @blur="handleBlur"
    />
    <ul v-show="showDropdown">
      <li 
        v-for="(option, index) in filteredOptions" 
        :key="index"
        @mousedown="selectOption(option)"
      >
        {{ option }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      options: ['Apple', 'Banana', 'Orange', 'Mango'],
      filteredOptions: [],
      showDropdown: false
    };
  },
  methods: {
    filterOptions() {
      this.filteredOptions = this.options.filter(option =>
        option.toLowerCase().includes(this.inputValue.toLowerCase())
      );
    },
    selectOption(option) {
      this.inputValue = option;
      this.showDropdown = false;
    },
    handleBlur() {
      setTimeout(() => {
        this.showDropdown = false;
      }, 200);
    }
  }
};
</script>

使用第三方库（如 Vue-Awesome-Autocomplete）

安装 vue-awesome-autocomplete 或其他类似库，快速实现功能丰富的自动补全。

npm install vue-awesome-autocomplete

<template>
  <vue-awesome-autocomplete
    v-model="selectedItem"
    :items="items"
    :min-chars="1"
    placeholder="Type to search..."
  />
</template>

<script>
import VueAwesomeAutocomplete from 'vue-awesome-autocomplete';

export default {
  components: {
    VueAwesomeAutocomplete
  },
  data() {
    return {
      selectedItem: '',
      items: ['Red', 'Green', 'Blue', 'Yellow']
    };
  }
};
</script>

远程数据搜索（结合 API 请求）

通过 axios 或其他 HTTP 客户端从远程服务器获取匹配数据，实现动态搜索。

<template>
  <div>
    <input 
      v-model="query" 
      @input="debouncedFetchOptions"
    />
    <ul v-if="suggestions.length">
      <li 
        v-for="(item, index) in suggestions" 
        :key="index"
        @click="selectSuggestion(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import _ from 'lodash';

export default {
  data() {
    return {
      query: '',
      suggestions: []
    };
  },
  created() {
    this.debouncedFetchOptions = _.debounce(this.fetchOptions, 300);
  },
  methods: {
    fetchOptions() {
      if (this.query.trim() === '') {
        this.suggestions = [];
        return;
      }
      axios.get(`/api/search?q=${this.query}`)
        .then(response => {
          this.suggestions = response.data;
        });
    },
    selectSuggestion(item) {
      this.query = item.name;
      this.suggestions = [];
    }
  }
};
</script>

自定义样式与动画

通过 CSS 和 Vue 的过渡组件增强交互体验，如下拉动画和高亮效果。

<template>
  <div class="autocomplete">
    <input v-model="inputText" @input="handleInput" />
    <transition name="fade">
      <ul class="suggestions" v-if="showSuggestions">
        <li 
          v-for="(suggestion, index) in filteredSuggestions"
          :key="index"
          :class="{ active: index === activeIndex }"
          @click="selectSuggestion(suggestion)"
        >
          {{ suggestion }}
        </li>
      </ul>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.suggestions li.active {
  background-color: #f0f0f0;
}
</style>

键盘导航支持

通过监听键盘事件（如 ArrowUp、ArrowDown、Enter）增强可访问性。

vue实现autocomplete

methods: {
  handleKeyDown(e) {
    if (e.key === 'ArrowDown') {
      this.activeIndex = Math.min(this.activeIndex + 1, this.filteredSuggestions.length - 1);
    } else if (e.key === 'ArrowUp') {
      this.activeIndex = Math.max(this.activeIndex - 1, 0);
    } else if (e.key === 'Enter') {
      this.selectSuggestion(this.filteredSuggestions[this.activeIndex]);
    }
  }
}