当前位置：首页 > VUE

vue实现全文检索

2026-02-25 16:26:03VUE

Vue 实现全文检索的方法

在 Vue 项目中实现全文检索功能，可以通过以下几种方式实现，具体选择取决于项目需求和复杂度。

使用前端库实现简单检索

对于小型项目或静态数据，可以使用前端库如 fuse.js 或 lunr.js 实现客户端全文检索。

安装 fuse.js：

npm install fuse.js

示例代码：

vue实现全文检索

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search..." />
    <ul>
      <li v-for="item in searchResults" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import Fuse from 'fuse.js';

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, title: 'Vue.js Guide' },
        { id: 2, title: 'React Tutorial' },
      ],
      fuse: null,
    };
  },
  computed: {
    searchResults() {
      if (!this.searchQuery) return this.items;
      return this.fuse.search(this.searchQuery).map(result => result.item);
    },
  },
  created() {
    this.fuse = new Fuse(this.items, {
      keys: ['title'],
      threshold: 0.3,
    });
  },
};
</script>

结合后端实现高效检索

对于大型数据集，建议使用后端搜索引擎如 Elasticsearch 或 Algolia，通过 API 调用实现高效检索。

安装 axios 用于 API 调用：

npm install axios

示例代码：

vue实现全文检索

<template>
  <div>
    <input v-model="searchQuery" @input="debouncedSearch" placeholder="Search..." />
    <ul>
      <li v-for="item in searchResults" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import _ from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
    };
  },
  methods: {
    search: _.debounce(function() {
      if (!this.searchQuery) {
        this.searchResults = [];
        return;
      }
      axios.get('/api/search', {
        params: { q: this.searchQuery },
      }).then(response => {
        this.searchResults = response.data;
      });
    }, 300),
  },
};
</script>

使用 Vue 插件简化实现

对于需要快速集成的场景，可以使用 Vue 插件如 vue-instantsearch（Algolia 官方提供）。

安装插件：

npm install vue-instantsearch

示例代码：

<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="your_index_name"
  >
    <ais-search-box />
    <ais-hits>
      <template v-slot:item="{ item }">
        <h2>{{ item.title }}</h2>
      </template>
    </ais-hits>
  </ais-instant-search>
</template>

<script>
import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch';
import algoliasearch from 'algoliasearch/lite';

export default {
  components: {
    AisInstantSearch,
    AisSearchBox,
    AisHits,
  },
  data() {
    return {
      searchClient: algoliasearch(
        'YourApplicationID',
        'YourSearchOnlyAPIKey'
      ),
    };
  },
};
</script>