当前位置：首页 > VUE

vue 搜索框列表实现

2026-02-20 19:09:40VUE

实现搜索框列表的基本思路

在Vue中实现搜索框列表功能，通常需要结合输入框的数据绑定、列表过滤和事件处理。以下是常见的实现方法：

数据绑定与输入处理

使用v-model绑定输入框的值到Vue实例的数据属性，监听输入变化触发搜索逻辑：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." @input="handleSearch">
    <ul v-if="filteredItems.length">
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-else>无匹配结果</p>
  </div>
</template>

计算属性实现过滤

利用计算属性实时过滤列表数据，这是Vue推荐的方式：

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())
      )
    }
  }
}

方法实现搜索逻辑

也可以使用方法来实现搜索功能，适合需要复杂搜索逻辑的场景：

export default {
  data() {
    return {
      searchQuery: '',
      items: [...],
      filteredItems: []
    }
  },
  methods: {
    handleSearch() {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  created() {
    this.filteredItems = [...this.items]
  }
}

使用第三方库增强功能

对于更复杂的搜索需求，可以考虑使用第三方库如Fuse.js实现模糊搜索：

import Fuse from 'fuse.js'

export default {
  data() {
    return {
      fuse: null,
      searchQuery: '',
      items: [...],
      filteredItems: []
    }
  },
  created() {
    this.fuse = new Fuse(this.items, {
      keys: ['name'],
      threshold: 0.4
    })
    this.filteredItems = [...this.items]
  },
  methods: {
    handleSearch() {
      this.filteredItems = this.searchQuery 
        ? this.fuse.search(this.searchQuery).map(r => r.item)
        : [...this.items]
    }
  }
}

性能优化建议

对于大型列表，考虑添加防抖处理避免频繁触发搜索：

import { debounce } from 'lodash'

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

样式增强

为搜索框和结果列表添加基础样式提升用户体验：

input {
  padding: 8px;
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

li {
  padding: 8px;
  cursor: pointer;
}

li:hover {
  background-color: #f5f5f5;
}

以上方法可以根据实际项目需求进行组合和调整，实现不同复杂度的搜索框列表功能。

vue 搜索框列表实现