当前位置：首页 > JavaScript

js实现combox

2026-01-31 18:09:18JavaScript

实现 ComboBox 的基本结构

使用 HTML、CSS 和 JavaScript 创建一个基础的 ComboBox 结构。HTML 部分包含一个输入框和一个下拉列表。

<div class="combo-box">
  <input type="text" class="combo-input" placeholder="Select an option">
  <ul class="combo-list">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

添加样式

为 ComboBox 添加基本样式，确保下拉列表默认隐藏，并在交互时显示。

js实现combox

.combo-box {
  position: relative;
  width: 200px;
}

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

.combo-list {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

.combo-list li {
  padding: 8px;
  cursor: pointer;
}

.combo-list li:hover {
  background-color: #f0f0f0;
}

实现交互逻辑

使用 JavaScript 处理输入框和下拉列表的交互，包括点击、键盘导航和选择功能。

js实现combox

document.addEventListener('DOMContentLoaded', function() {
  const comboBox = document.querySelector('.combo-box');
  const input = comboBox.querySelector('.combo-input');
  const list = comboBox.querySelector('.combo-list');
  const items = list.querySelectorAll('li');

  // 显示或隐藏下拉列表
  input.addEventListener('click', function() {
    list.style.display = list.style.display === 'block' ? 'none' : 'block';
  });

  // 选择列表项
  items.forEach(item => {
    item.addEventListener('click', function() {
      input.value = item.textContent;
      list.style.display = 'none';
    });
  });

  // 键盘导航
  input.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowDown' && list.style.display !== 'block') {
      list.style.display = 'block';
    }
  });

  // 点击外部关闭下拉列表
  document.addEventListener('click', function(e) {
    if (!comboBox.contains(e.target)) {
      list.style.display = 'none';
    }
  });
});

动态加载选项

如果需要从服务器动态加载选项，可以使用 fetch API 或其他异步方法。

input.addEventListener('input', function() {
  const searchTerm = input.value.trim();
  if (searchTerm.length > 0) {
    fetch(`/api/options?query=${searchTerm}`)
      .then(response => response.json())
      .then(data => {
        list.innerHTML = '';
        data.forEach(option => {
          const li = document.createElement('li');
          li.textContent = option;
          li.addEventListener('click', function() {
            input.value = option;
            list.style.display = 'none';
          });
          list.appendChild(li);
        });
        list.style.display = 'block';
      });
  } else {
    list.style.display = 'none';
  }
});

增强功能

为 ComboBox 添加更多功能，如多选、过滤和自定义样式。

// 多选功能
const selectedItems = [];
items.forEach(item => {
  item.addEventListener('click', function() {
    if (item.classList.contains('selected')) {
      item.classList.remove('selected');
      const index = selectedItems.indexOf(item.textContent);
      if (index > -1) {
        selectedItems.splice(index, 1);
      }
    } else {
      item.classList.add('selected');
      selectedItems.push(item.textContent);
    }
    input.value = selectedItems.join(', ');
  });
});

// 过滤功能
input.addEventListener('input', function() {
  const filter = input.value.toLowerCase();
  items.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(filter) ? 'block' : 'none';
  });
});