vue实现autocomplete

Vue 实现 Autocomplete 功能

Autocomplete（自动补全）功能可以通过 Vue 结合自定义逻辑或第三方库实现。以下是几种常见方法：

使用自定义组件实现

创建一个 Vue 组件，监听输入框的变化并动态过滤匹配项：

<template>
  <div>
    <input 
      v-model="searchText" 
      @input="handleInput"
      @focus="showSuggestions = true"
      @blur="hideSuggestions"
    />
    <ul v-if="showSuggestions && filteredItems.length">
      <li 
        v-for="item in filteredItems" 
        :key="item"
        @mousedown="selectItem(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      showSuggestions: false,
      items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
      filteredItems: []
    }
  },
  methods: {
    handleInput() {
      this.filteredItems = this.items.filter(item => 
        item.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
    selectItem(item) {
      this.searchText = item;
      this.showSuggestions = false;
    },
    hideSuggestions() {
      setTimeout(() => {
        this.showSuggestions = false;
      }, 200);
    }
  }
}
</script>

使用第三方库

Vue 生态中有许多成熟的 Autocomplete 组件库，例如 vue-multiselect：

安装：

npm install vue-multiselect

使用：

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options"
      :searchable="true"
      :close-on-select="true"
      placeholder="Search..."
    />
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect';

export default {
  components: { Multiselect },
  data() {
    return {
      selected: null,
      options: ['Option 1', 'Option 2', 'Option 3']
    }
  }
}
</script>

结合 API 实现远程搜索

对于需要从服务器获取建议的场景，可以使用 Axios 发送请求：

<template>
  <div>
    <input v-model="query" @input="fetchSuggestions" />
    <ul v-if="suggestions.length">
      <li v-for="suggestion in suggestions" :key="suggestion.id">
        {{ suggestion.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      query: '',
      suggestions: [],
      debounce: null
    }
  },
  methods: {
    fetchSuggestions() {
      clearTimeout(this.debounce);
      this.debounce = setTimeout(() => {
        if (this.query.length > 2) {
          axios.get('/api/suggestions', { params: { q: this.query } })
            .then(response => {
              this.suggestions = response.data;
            });
        }
      }, 300);
    }
  }
}
</script>

样式优化建议

为下拉建议列表添加基础样式：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
}

li {
  padding: 8px 12px;
  cursor: pointer;
}

li:hover {
  background-color: #f5f5f5;
}

这些方法涵盖了从简单实现到复杂场景的解决方案，可以根据具体需求选择适合的方式。