vue实现搜索智能提示
Vue 实现搜索智能提示的方法
数据绑定与输入监听
使用 v-model 绑定输入框的值，通过 @input 或 @keyup 监听用户输入变化。结合 debounce 减少频繁请求。
<template>
<input v-model="searchQuery" @input="handleInput" />
<ul v-if="suggestions.length">
<li v-for="item in suggestions" :key="item.id">{{ item.text }}</li>
</ul>
</template>防抖处理
引入 lodash.debounce 或在 Vue 中使用 setTimeout 实现防抖，避免高频触发搜索逻辑。
import debounce from 'lodash.debounce';
export default {
methods: {
handleInput: debounce(function() {
this.fetchSuggestions();
}, 300)
}
}请求后端数据
通过 axios 或 fetch 调用后端接口获取提示数据，建议将 API 请求封装成独立方法。
methods: {
async fetchSuggestions() {
if (!this.searchQuery.trim()) return;
const res = await axios.get('/api/suggestions', {
params: { q: this.searchQuery }
});
this.suggestions = res.data;
}
}本地过滤实现
若无后端支持，可使用 filter 对本地数据进行匹配筛选，支持模糊搜索或高亮关键词。
computed: {
filteredSuggestions() {
return this.localData.filter(item =>
item.text.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
}键盘导航支持
通过监听 @keydown 事件实现上下箭头选择提示项，增强用户体验。
handleKeyDown(e) {
if (e.key === 'ArrowDown') {
this.highlightIndex = Math.min(this.highlightIndex + 1, this.suggestions.length - 1);
}
if (e.key === 'ArrowUp') {
this.highlightIndex = Math.max(this.highlightIndex - 1, 0);
}
}样式与交互优化
添加加载状态、空状态提示及点击外部关闭下拉框的功能，使用 v-click-outside 等指令优化交互。
<div v-if="isLoading">搜索中...</div>
<div v-else-if="!suggestions.length && searchQuery">无匹配结果</div>性能注意事项
对于大数据量场景，建议采用虚拟滚动（如 vue-virtual-scroller）避免渲染性能问题。
