当前位置：首页 > VUE

vue实现搜索框

2026-01-18 18:26:28VUE

Vue 实现搜索框的方法

基础实现：双向绑定与事件监听

在 Vue 中实现搜索框可以通过 v-model 实现数据双向绑定，结合 @input 或 @keyup 事件监听用户输入：

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  methods: {
    handleSearch() {
      // 可在此处添加防抖逻辑
    }
  }
}
</script>

防抖优化性能

高频输入场景下建议添加防抖功能，避免频繁触发搜索逻辑：

import { debounce } from 'lodash-es';

methods: {
  handleSearch: debounce(function() {
    // 实际搜索逻辑
  }, 300)
}

异步搜索实现

需要调用 API 时可采用异步方式：

async handleSearch() {
  if (!this.searchQuery.trim()) return;

  try {
    const res = await axios.get('/api/search', {
      params: { q: this.searchQuery }
    });
    this.results = res.data;
  } catch (error) {
    console.error(error);
  }
}

样式增强建议

结合 CSS 实现现代搜索框样式：

.search-box {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
  transition: all 0.3s;
}
.search-box:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

完整组件示例

<template>
  <div class="search-container">
    <div class="search-box-wrapper">
      <input
        v-model="searchTerm"
        @input="onSearch"
        class="search-box"
        placeholder="搜索..."
      />
      <button @click="clearSearch">×</button>
    </div>

    <div v-if="isLoading">加载中...</div>
    <search-results :items="results" v-else-if="results.length"/>
  </div>
</template>

<script>
export default {
  data: () => ({
    searchTerm: '',
    results: [],
    isLoading: false,
    debounceTimer: null
  }),
  methods: {
    onSearch() {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.performSearch();
      }, 500);
    },
    async performSearch() {
      if (!this.searchTerm) {
        this.results = [];
        return;
      }

      this.isLoading = true;
      try {
        const response = await fetch(`/api/search?q=${encodeURIComponent(this.searchTerm)}`);
        this.results = await response.json();
      } finally {
        this.isLoading = false;
      }
    },
    clearSearch() {
      this.searchTerm = '';
      this.results = [];
    }
  }
};
</script>

vue实现搜索框