vue表单实现搜索

实现Vue表单搜索功能

在Vue中实现表单搜索功能通常涉及表单绑定、事件处理和搜索逻辑。以下是具体实现方法：

数据绑定与表单结构

使用v-model实现表单与Vue数据的双向绑定：

<template>
  <div>
    <input v-model="searchQuery" placeholder="输入搜索内容">
    <button @click="performSearch">搜索</button>
  </div>
</template>

data() {
  return {
    searchQuery: '',
    items: [], // 原始数据列表
    filteredItems: [] // 过滤后的结果
  }
}

搜索逻辑实现

通过计算属性实现实时搜索：

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

或使用方法触发搜索：

methods: {
  performSearch() {
    this.filteredItems = this.items.filter(item =>
      item.title.includes(this.searchQuery)
    )
  }
}

高级搜索功能

实现多条件搜索：

data() {
  return {
    searchOptions: {
      keyword: '',
      category: '',
      dateRange: []
    }
  }
},
methods: {
  advancedSearch() {
    return this.items.filter(item => {
      const matchesKeyword = item.name.includes(this.searchOptions.keyword)
      const matchesCategory = this.searchOptions.category 
        ? item.category === this.searchOptions.category 
        : true
      return matchesKeyword && matchesCategory
    })
  }
}

防抖优化

使用lodash的防抖函数优化频繁搜索：

import { debounce } from 'lodash'

methods: {
  search: debounce(function() {
    // 搜索逻辑
  }, 500)
}

与后端API交互

结合axios实现远程搜索：

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

搜索结果展示

在模板中展示搜索结果：

<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.name }}
  </li>
</ul>

表单验证

添加简单的表单验证：

methods: {
  validateAndSearch() {
    if (this.searchQuery.trim() === '') {
      alert('请输入搜索内容')
      return
    }
    this.performSearch()
  }
}