当前位置：首页 > VUE

用vue实现搜索查询

2026-03-26 23:59:19VUE

实现搜索查询功能

在Vue中实现搜索查询功能通常涉及以下几个关键步骤。以下是一个基于Vue 3和Composition API的示例：

数据绑定与输入处理

<template>
  <input v-model="searchQuery" placeholder="搜索..." />
</template>

<script setup>
import { ref } from 'vue';

const searchQuery = ref('');
</script>

v-model实现了输入框与searchQuery变量的双向绑定，用户输入内容会自动更新到变量中。

用vue实现搜索查询

过滤数据列表

<template>
  <input v-model="searchQuery" placeholder="搜索..." />
  <ul>
    <li v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
import { ref, computed } from 'vue';

const searchQuery = ref('');
const items = ref([
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橙子' }
]);

const filteredItems = computed(() => {
  return items.value.filter(item => 
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});
</script>

使用computed属性创建响应式的过滤列表，当searchQuery变化时自动重新计算。

添加防抖优化

对于频繁触发的搜索，可以添加防抖功能：

用vue实现搜索查询

<script setup>
import { ref, computed } from 'vue';
import { useDebounceFn } from '@vueuse/core';

const searchQuery = ref('');
const debouncedSearch = useDebounceFn((value) => {
  // 这里可以调用API或执行其他搜索逻辑
  console.log('搜索:', value);
}, 500);
</script>

使用VueUse的useDebounceFn可以避免频繁触发搜索操作。

远程搜索实现

对于需要调用API的远程搜索：

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const searchQuery = ref('');
const searchResults = ref([]);

const searchRemote = async () => {
  try {
    const response = await axios.get('/api/search', {
      params: { q: searchQuery.value }
    });
    searchResults.value = response.data;
  } catch (error) {
    console.error('搜索出错:', error);
  }
};
</script>

完整组件示例

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      @input="handleSearch"
      placeholder="输入搜索关键词..."
    />

    <div v-if="isLoading">加载中...</div>

    <ul v-else>
      <li v-for="result in searchResults" :key="result.id">
        {{ result.title }}
      </li>
      <li v-if="searchResults.length === 0 && searchQuery">
        没有找到相关结果
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import axios from 'axios';

const searchQuery = ref('');
const searchResults = ref([]);
const isLoading = ref(false);

const searchRemote = async (query) => {
  if (!query.trim()) {
    searchResults.value = [];
    return;
  }

  isLoading.value = true;
  try {
    const response = await axios.get('/api/search', {
      params: { q: query }
    });
    searchResults.value = response.data;
  } catch (error) {
    console.error('搜索出错:', error);
  } finally {
    isLoading.value = false;
  }
};

const debouncedSearch = useDebounceFn(searchRemote, 500);

const handleSearch = () => {
  debouncedSearch(searchQuery.value);
};
</script>

<style scoped>
.search-container {
  max-width: 600px;
  margin: 0 auto;
}
input {
  width: 100%;
  padding: 8px;
  font-size: 16px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
</style>