当前位置：首页 > VUE

vue实现搜索推荐

2026-01-19 18:59:53VUE

实现搜索推荐功能

在Vue中实现搜索推荐功能，可以通过结合输入框的实时监听、防抖处理和API请求来实现。以下是一个完整的实现方案：

监听用户输入

使用v-model绑定输入框的值，并通过@input事件监听输入变化：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="handleInput" 
      placeholder="输入搜索内容..."
    />
    <ul v-if="suggestions.length">
      <li v-for="item in suggestions" :key="item.id" @click="selectSuggestion(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

防抖处理

引入防抖函数避免频繁触发API请求：

vue实现搜索推荐

import { debounce } from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      suggestions: [],
      debouncedGetSuggestions: null
    }
  },
  created() {
    this.debouncedGetSuggestions = debounce(this.getSuggestions, 300);
  },
  methods: {
    handleInput() {
      if (this.searchQuery.trim()) {
        this.debouncedGetSuggestions();
      } else {
        this.suggestions = [];
      }
    }
  }
}

获取推荐数据

调用API获取搜索建议数据：

methods: {
  async getSuggestions() {
    try {
      const response = await axios.get('/api/suggestions', {
        params: { q: this.searchQuery }
      });
      this.suggestions = response.data;
    } catch (error) {
      console.error('获取推荐失败:', error);
    }
  },
  selectSuggestion(item) {
    this.searchQuery = item.name;
    this.suggestions = [];
    // 执行搜索或其他操作
  }
}

样式优化

为推荐列表添加基本样式：

vue实现搜索推荐

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;
}

性能优化

对于大量数据的情况，可以考虑以下优化：

添加加载状态指示器
实现虚拟滚动
缓存已请求的结果

data() {
  return {
    isLoading: false,
    cache: new Map()
  }
},
methods: {
  async getSuggestions() {
    if (this.cache.has(this.searchQuery)) {
      this.suggestions = this.cache.get(this.searchQuery);
      return;
    }

    this.isLoading = true;
    try {
      const response = await axios.get('/api/suggestions', {
        params: { q: this.searchQuery }
      });
      this.suggestions = response.data;
      this.cache.set(this.searchQuery, response.data);
    } finally {
      this.isLoading = false;
    }
  }
}

键盘导航支持

增强用户体验，支持键盘上下键选择和回车确认：

methods: {
  handleKeyDown(e) {
    if (e.key === 'ArrowDown') {
      // 向下选择逻辑
    } else if (e.key === 'ArrowUp') {
      // 向上选择逻辑
    } else if (e.key === 'Enter') {
      // 确认选择逻辑
    }
  }
}

通过以上步骤，可以实现一个功能完善、用户体验良好的搜索推荐功能。根据实际需求，可以进一步扩展如高亮匹配文本、分组显示推荐结果等高级特性。

标签: vue