当前位置：首页 > VUE

vue实现搜索功能demo

2026-02-24 09:52:11VUE

以下是一个基于 Vue 3 的搜索功能实现示例，包含关键代码和逻辑说明：

vue实现搜索功能demo

基础实现代码

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="输入关键词搜索" 
      @input="handleSearch"
    />
    <ul v-if="filteredItems.length">
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>暂无匹配结果</p>
  </div>
</template>

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

const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' }
]);

const searchQuery = ref('');

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

function handleSearch() {
  console.log('搜索词:', searchQuery.value);
}
</script>

优化搜索性能

添加防抖处理避免频繁触发搜索

import { debounce } from 'lodash';

const debouncedSearch = debounce(() => {
  console.log('防抖处理后的搜索:', searchQuery.value);
}, 500);

function handleSearch() {
  debouncedSearch();
}

异步搜索实现

const searchResults = ref([]);

async function fetchSearchResults(query) {
  try {
    const response = await fetch(`/api/search?q=${query}`);
    searchResults.value = await response.json();
  } catch (error) {
    console.error('搜索出错:', error);
  }
}

watch(searchQuery, (newVal) => {
  if (newVal.length > 2) {
    fetchSearchResults(newVal);
  }
});

样式增强

input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 300px;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

li {
  padding: 8px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

li:hover {
  background-color: #f5f5f5;
}

完整功能扩展

<template>
  <div class="search-container">
    <div class="search-box">
      <input
        v-model="searchQuery"
        placeholder="输入关键词搜索"
        @input="handleSearch"
        @focus="showSuggestions = true"
        @blur="hideSuggestions"
      />
      <button @click="clearSearch">清除</button>
    </div>

    <div v-if="showSuggestions" class="suggestions">
      <div v-if="isLoading" class="loading">搜索中...</div>
      <div v-else-if="!filteredItems.length" class="no-results">
        无匹配结果
      </div>
      <ul v-else>
        <li 
          v-for="item in filteredItems" 
          :key="item.id"
          @mousedown="selectItem(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

关键点说明：