当前位置：首页 > VUE

前端vue实现即时搜索

2026-02-23 09:51:23VUE

实现即时搜索的基本思路

在Vue中实现即时搜索通常需要结合输入框的事件监听和数据过滤。通过监听输入框的变化，实时触发搜索逻辑，展示匹配的结果。

使用v-model和watch实现

通过v-model绑定输入框的值，利用watch监听输入值的变化，触发搜索方法。

前端vue实现即时搜索

<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: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用debounce优化性能

频繁触发搜索可能导致性能问题，可以使用debounce函数限制触发频率。

前端vue实现即时搜索

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

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ],
      filteredItems: []
    }
  },
  watch: {
    searchQuery: debounce(function(newVal) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(newVal.toLowerCase())
      )
    }, 300)
  }
}
</script>

结合API请求实现远程搜索

当需要从服务器获取搜索结果时，可以在watch中调用API方法。

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

<script>
import axios from 'axios'
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    }
  },
  watch: {
    searchQuery: debounce(function(newVal) {
      if (newVal.length > 2) {
        this.fetchSearchResults(newVal)
      }
    }, 300)
  },
  methods: {
    fetchSearchResults(query) {
      axios.get(`/api/search?q=${query}`)
        .then(response => {
          this.searchResults = response.data
        })
    }
  }
}
</script>

使用自定义指令实现

可以创建自定义指令来处理输入框的即时搜索功能。

Vue.directive('search', {
  bind(el, binding, vnode) {
    el.addEventListener('input', debounce(() => {
      vnode.context[binding.expression](el.value)
    }, 300))
  }
})

<template>
  <div>
    <input v-search="handleSearch" placeholder="搜索...">
    <ul>
      <li v-for="item in results" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      results: []
    }
  },
  methods: {
    handleSearch(query) {
      // 处理搜索逻辑
    }
  }
}
</script>