当前位置：首页 > VUE

vue实现input动态搜索

2026-02-21 09:53:53VUE

Vue 实现 input 动态搜索

使用 v-model 和 @input 事件

通过 v-model 绑定输入框的值，结合 @input 事件触发搜索逻辑。debounce 可以避免频繁触发搜索。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [], // 原始数据
      filteredItems: [] // 过滤后的数据
    }
  },
  methods: {
    handleSearch() {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 watch 监听搜索词

通过 watch 监听 searchQuery 的变化，触发搜索逻辑。可以结合 debounce 优化性能。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [], // 原始数据
      filteredItems: [] // 过滤后的数据
    }
  },
  watch: {
    searchQuery(newVal) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(newVal.toLowerCase())
      )
    }
  }
}
</script>

使用 computed 计算属性

通过 computed 动态计算过滤后的数据，响应式更新搜索结果。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [] // 原始数据
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 Lodash 的 debounce 优化性能

避免频繁触发搜索逻辑，使用 debounce 延迟执行搜索。

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

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [], // 原始数据
      filteredItems: [] // 过滤后的数据
    }
  },
  created() {
    this.debouncedSearch = debounce(this.handleSearch, 300)
  },
  methods: {
    handleSearch() {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

结合 API 请求实现远程搜索

通过输入框触发 API 请求，获取远程搜索结果。

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

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [] // 远程搜索结果
    }
  },
  created() {
    this.debouncedSearch = debounce(this.fetchSearchResults, 300)
  },
  methods: {
    async fetchSearchResults() {
      if (this.searchQuery.trim() === '') {
        this.searchResults = []
        return
      }
      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchQuery }
        })
        this.searchResults = response.data
      } catch (error) {
        console.error('搜索失败:', error)
      }
    }
  }
}
</script>