当前位置：首页 > VUE

vue实现input搜索功能

2026-01-23 02:36:20VUE

实现基础搜索功能

在Vue中实现input搜索功能可以通过v-model绑定输入值，结合计算属性或方法过滤数据。以下是一个基础实现示例：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." />
    <ul>
      <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: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

添加防抖优化性能

频繁触发搜索会影响性能，可以使用lodash的debounce函数或自定义防抖逻辑：

vue实现input搜索功能

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      filteredItems: []
    }
  },
  watch: {
    searchQuery: debounce(function(newVal) {
      this.filterItems(newVal)
    }, 500)
  },
  methods: {
    filterItems(query) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(query.toLowerCase())
      )
    }
  }
}

实现异步搜索

当需要从API获取搜索结果时，可以使用async/await：

export default {
  methods: {
    async searchItems() {
      try {
        const response = await axios.get('/api/items', {
          params: { q: this.searchQuery }
        })
        this.filteredItems = response.data
      } catch (error) {
        console.error('搜索失败:', error)
      }
    }
  },
  watch: {
    searchQuery: 'searchItems'
  }
}

添加加载状态和空状态

改善用户体验，添加加载指示器和无结果提示：

vue实现input搜索功能

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." />
    <div v-if="isLoading">搜索中...</div>
    <div v-else-if="filteredItems.length === 0">没有找到结果</div>
    <ul v-else>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

使用第三方组件库

使用如Element UI等组件库可以快速实现更美观的搜索框：

<template>
  <el-input
    v-model="searchQuery"
    placeholder="请输入内容"
    clearable
    @clear="handleClear"
  >
    <el-button slot="append" icon="el-icon-search" @click="searchItems" />
  </el-input>
</template>

高级搜索功能

实现多条件搜索可以扩展过滤逻辑：

computed: {
  filteredItems() {
    return this.items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      const matchesCategory = this.selectedCategory ? item.category === this.selectedCategory : true
      return matchesSearch && matchesCategory
    })
  }
}