实现一个支持搜索的SearchableSelect组件

引言

在现代Web开发中，搜索选择框（Searchable Select）已经成为提升用户交互体验的重要组件。它结合了传统选择框和搜索输入框的功能，允许用户在大量选项中快速定位所需内容。

组件核心功能

• ✅ 全面兼容IE8+浏览器
• 🔍 本地与远程搜索功能
• ⚡ 键盘导航（上下箭头、回车选择）
• ⌛ 远程搜索加载状态指示
• ✨ 清除选择功能
• 🔄 动态数据源支持

实现分析

组件结构设计

<div class="searchable-select-wrapper">
  <div class="search-container">
    <input class="select-input" type="text" placeholder="搜索...">
    <span class="select-clear">×</span>
  </div>
  <div class="dropdown-container">
    <div class="select-options"></div>
    <div class="select-loading">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>
  </div>
</div>

核心JavaScript类

function SearchableSelect(opt) {
  // 初始化配置选项
  this.labelKey = opt.labelKey || 'label';
  this.valueKey = opt.valueKey || 'value';
  this.options = opt.options || [];
  this.searchable = opt.searchable !== false;
  this.onSearch = opt.onSearch || null;
  this.placeholder = opt.placeholder || '搜索...';
  this.container = document.getElementById(opt.id);

  this._init();
}

SearchableSelect.prototype = {
  _init: function() {
    this._render();
    this._bindEvents();
  },

  _render: function() {
    // 渲染组件结构
  },

  _bindEvents: function() {
    // 绑定事件处理
  },

  _filter: function(keyword) {
    // 过滤选项逻辑
  },

  _showDropdown: function() {
    // 显示下拉框
  },

  _hideDropdown: function() {
    // 隐藏下拉框
  },

  _selectOption: function(option) {
    // 选择选项
  }
};

键盘导航支持

_handleKeyDown: function(e) {
  switch(e.keyCode) {
    case 38: // 上箭头
      this._moveHighlight(-1);
      break;
    case 40: // 下箭头
      this._moveHighlight(1);
      break;
    case 13: // 回车
      this._selectHighlighted();
      break;
    case 27: // ESC
      this._hideDropdown();
      break;
  }
}

远程搜索集成

// 远程搜索示例
var select = new SearchableSelect({
  id: 'remote-select',
  onSearch: function(keyword, callback) {
    fetch(`/api/search?q=${keyword}`)
      .then(res => res.json())
      .then(data => callback(data));
  }
});