当前位置：首页 > VUE

使用vue实现搜索

2026-01-14 02:17:49VUE

使用 Vue 实现搜索功能

基本搜索实现

创建搜索输入框和按钮
在 Vue 模板中添加一个输入框和搜索按钮，绑定输入框的值到 Vue 的数据属性。

<template>
  <div>
    <input v-model="searchQuery" placeholder="输入搜索关键词" />
    <button @click="performSearch">搜索</button>
  </div>
</template>

定义数据和方法
在 Vue 的 data 中定义 searchQuery 和搜索结果列表 searchResults，并在 methods 中实现搜索逻辑。

使用vue实现搜索

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    };
  },
  methods: {
    performSearch() {
      // 模拟搜索逻辑
      this.searchResults = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};

实时搜索（防抖优化）

使用防抖减少请求频率
通过 lodash.debounce 或自定义防抖函数优化实时搜索性能。

使用vue实现搜索

import debounce from 'lodash.debounce';

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    };
  },
  created() {
    this.debouncedSearch = debounce(this.performSearch, 300);
  },
  watch: {
    searchQuery(newVal) {
      if (newVal.trim()) {
        this.debouncedSearch();
      }
    }
  }
};

结合后端 API 搜索

调用 API 获取搜索结果
使用 axios 或 fetch 调用后端搜索接口，并处理返回结果。

methods: {
  async performSearch() {
    try {
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      });
      this.searchResults = response.data;
    } catch (error) {
      console.error('搜索失败:', error);
    }
  }
}

显示搜索结果

渲染搜索结果列表
在模板中遍历 searchResults 并展示结果。

<template>
  <div>
    <input v-model="searchQuery" @input="debouncedSearch" />
    <ul v-if="searchResults.length">
      <li v-for="result in searchResults" :key="result.id">
        {{ result.name }}
      </li>
    </ul>
    <p v-else>暂无结果</p>
  </div>
</template>

高级功能（可选）

高亮匹配关键词
使用正则表达式或第三方库（如 vue-highlight-words）高亮显示匹配的文本。

methods: {
  highlightText(text) {
    const regex = new RegExp(this.searchQuery, 'gi');
    return text.replace(regex, match => `<span class="highlight">${match}</span>`);
  }
}

分页加载
结合分页参数调用 API，实现滚动加载或分页按钮。

data() {
  return {
    currentPage: 1,
    totalPages: 0
  };
},
methods: {
  async loadMore() {
    this.currentPage++;
    const response = await axios.get('/api/search', {
      params: { q: this.searchQuery, page: this.currentPage }
    });
    this.searchResults.push(...response.data.results);
  }
}