vue实现搜索下拉

实现搜索下拉功能

使用Vue实现搜索下拉功能通常需要结合输入框和下拉列表，监听用户输入并展示匹配的选项。以下是具体实现方法：

基础实现方案

创建Vue组件，包含输入框和下拉列表

<template>
  <div class="search-dropdown">
    <input 
      v-model="searchQuery" 
      @input="filterOptions"
      @focus="showDropdown = true"
      @blur="handleBlur"
    />
    <ul v-show="showDropdown && filteredOptions.length">
      <li 
        v-for="option in filteredOptions" 
        :key="option"
        @mousedown="selectOption(option)"
      >
        {{ option }}
      </li>
    </ul>
  </div>
</template>

数据与逻辑处理部分

<script>
export default {
  data() {
    return {
      searchQuery: '',
      showDropdown: false,
      options: ['Apple', 'Banana', 'Orange', 'Mango'],
      filteredOptions: []
    }
  },
  methods: {
    filterOptions() {
      this.filteredOptions = this.options.filter(option =>
        option.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    },
    selectOption(option) {
      this.searchQuery = option
      this.showDropdown = false
    },
    handleBlur() {
      setTimeout(() => {
        this.showDropdown = false
      }, 200)
    }
  }
}
</script>

样式优化

添加基本样式提升用户体验

<style scoped>
.search-dropdown {
  position: relative;
  width: 300px;
}

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

ul {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
  background: white;
}

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

li:hover {
  background-color: #f5f5f5;
}
</style>

高级功能扩展

添加异步数据加载功能

methods: {
  async filterOptions() {
    if (this.searchQuery.length < 2) return

    try {
      const response = await fetch(`/api/search?q=${this.searchQuery}`)
      this.filteredOptions = await response.json()
    } catch (error) {
      console.error('搜索失败:', error)
    }
  }
}

添加键盘导航支持

mounted() {
  window.addEventListener('keydown', this.handleKeyDown)
},
beforeDestroy() {
  window.removeEventListener('keydown', this.handleKeyDown)
},
methods: {
  handleKeyDown(e) {
    if (!this.showDropdown) return

    if (e.key === 'ArrowDown') {
      // 向下导航逻辑
    } else if (e.key === 'ArrowUp') {
      // 向上导航逻辑
    } else if (e.key === 'Enter') {
      // 确认选择逻辑
    }
  }
}

性能优化建议

对输入事件进行防抖处理

import { debounce } from 'lodash'

methods: {
  filterOptions: debounce(function() {
    // 过滤逻辑
  }, 300)
}

使用虚拟滚动处理大量数据

<template>
  <RecycleScroller
    v-show="showDropdown"
    :items="filteredOptions"
    :item-size="32"
    key-field="id"
    style="height: 200px"
  >
    <template v-slot="{ item }">
      <li @mousedown="selectOption(item)">
        {{ item.name }}
      </li>
    </template>
  </RecycleScroller>
</template>

组件封装建议

将搜索下拉组件封装为可复用组件

props: {
  options: {
    type: Array,
    default: () => []
  },
  asyncSearch: {
    type: Function,
    default: null
  },
  debounceTime: {
    type: Number,
    default: 300
  }
}

通过以上方法可以实现一个功能完善、性能优化的Vue搜索下拉组件，可根据实际需求选择适合的实现方案。