vue实现autocomplete

Vue 实现 Autocomplete 功能

Autocomplete（自动补全）功能在 Vue 中可以通过多种方式实现，以下是几种常见的方法：

使用原生 HTML 和 Vue 数据绑定

通过 Vue 的数据绑定和事件处理，可以实现一个简单的 Autocomplete 功能。

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="handleInput" 
      placeholder="Type to search..."
    />
    <ul v-if="showSuggestions">
      <li 
        v-for="(item, index) in filteredItems" 
        :key="index" 
        @click="selectItem(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
      filteredItems: [],
      showSuggestions: false
    }
  },
  methods: {
    handleInput() {
      this.filteredItems = this.suggestions.filter(item =>
        item.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
      this.showSuggestions = this.searchQuery.length > 0 && this.filteredItems.length > 0;
    },
    selectItem(item) {
      this.searchQuery = item;
      this.showSuggestions = false;
    }
  }
}
</script>

使用第三方库

Vue 生态中有许多成熟的 Autocomplete 组件库，例如 vue-autosuggest 或 v-autocomplete。

安装 vue-autosuggest：

npm install vue-autosuggest

示例代码：

<template>
  <div>
    <vue-autosuggest
      v-model="query"
      :suggestions="filteredSuggestions"
      @input="onInputChange"
      @selected="onSelected"
    >
      <template #default="{ suggestion }">
        <div>{{ suggestion.item }}</div>
      </template>
    </vue-autosuggest>
  </div>
</template>

<script>
import { VueAutosuggest } from 'vue-autosuggest';

export default {
  components: {
    VueAutosuggest
  },
  data() {
    return {
      query: '',
      suggestions: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
      filteredSuggestions: []
    };
  },
  methods: {
    onInputChange() {
      this.filteredSuggestions = this.suggestions.filter(item =>
        item.toLowerCase().includes(this.query.toLowerCase())
      );
    },
    onSelected(item) {
      this.query = item.item;
    }
  }
};
</script>

使用 Element UI 或 Vuetify

如果项目中使用了 Element UI 或 Vuetify，可以直接使用它们提供的 Autocomplete 组件。

Element UI 示例：

<template>
  <el-autocomplete
    v-model="searchQuery"
    :fetch-suggestions="querySearch"
    placeholder="Type to search"
    @select="handleSelect"
  />
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']
    };
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.suggestions.filter(item =>
            item.toLowerCase().includes(queryString.toLowerCase())
          )
        : this.suggestions;
      cb(results.map(item => ({ value: item })));
    },
    handleSelect(item) {
      this.searchQuery = item.value;
    }
  }
};
</script>

异步请求数据

对于需要从后端获取数据的场景，可以使用异步请求：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="debounceInput" 
      placeholder="Type to search..."
    />
    <ul v-if="showSuggestions">
      <li 
        v-for="(item, index) in filteredItems" 
        :key="index" 
        @click="selectItem(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      filteredItems: [],
      showSuggestions: false,
      timeout: null
    }
  },
  methods: {
    debounceInput() {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.fetchSuggestions();
      }, 300);
    },
    fetchSuggestions() {
      if (this.searchQuery.length > 0) {
        axios.get(`/api/search?q=${this.searchQuery}`)
          .then(response => {
            this.filteredItems = response.data;
            this.showSuggestions = this.filteredItems.length > 0;
          });
      } else {
        this.filteredItems = [];
        this.showSuggestions = false;
      }
    },
    selectItem(item) {
      this.searchQuery = item.name;
      this.showSuggestions = false;
    }
  }
}
</script>

样式优化

可以为 Autocomplete 添加一些基础样式以提升用户体验：

ul {
  list-style-type: 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;
}

注意事项

• 对于大量数据，建议使用防抖（debounce）或节流（throttle）技术减少请求频率。
• 考虑添加键盘导航（上下箭头选择、Enter 确认）以提升可访问性。
• 移动端适配可能需要额外处理触摸事件。
• 如果数据敏感，确保实现适当的后端验证和安全措施。