使用JavaScript创建完全功能化且可自定义的可编辑组合框，通过允许从预定义列表中选择和输入新值来增强用户交互。本教程探讨两种方法：使用HTML、CSS和JavaScript的手动实现，以及利用Select2库的简化方法。
目录
方法一：构建自定义可编辑组合框
此方法提供精细的控制和对底层机制的深入理解。我们将结合一个用于键入的输入字段和一个隐藏的无序列表来显示选项。
首先，让我们设置HTML结构：
<div class="combobox">
<input type="text" id="comboboxInput" placeholder="选择或输入...">
<ul id="comboboxList"></ul>
</div>
接下来，添加用于样式的CSS：
.combobox {
position: relative;
display: inline-block;
}
.combobox input {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
.combobox ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
background-color: white;
display: none; /* 默认隐藏 */
}
.combobox li {
padding: 5px;
cursor: pointer;
}
.combobox li:hover {
background-color: #f0f0f0;
}
最后，处理功能的JavaScript：
const input = document.getElementById('comboboxInput');
const list = document.getElementById('comboboxList');
let options = ['选项1', '选项2', '选项3'];
input.addEventListener('input', () => {
list.innerHTML = '';
const filter = input.value.toLowerCase();
options.forEach(option => {
if (option.toLowerCase().includes(filter)) {
const item = document.createElement('li');
item.textContent = option;
item.addEventListener('click', () => {
input.value = option;
list.style.display = 'none';
});
list.appendChild(item);
}
});
list.style.display = input.value ? 'block' : 'none';
});
input.addEventListener('focus', () => {
list.style.display = 'block';
});
input.addEventListener('blur', () => {
setTimeout(() => {
list.style.display = 'none';
}, 100);
});
// 添加新选项功能（示例）
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !options.includes(input.value)) {
options.push(input.value);
list.style.display = 'none';
input.value = ''; //添加后清除输入
}
});
方法二：使用Select2库
Select2极大地简化了这个过程。在您的项目中包含Select2 CSS和JavaScript文件（您可以从官方Select2网站下载它们或使用CDN）。然后，在您的select元素上初始化Select2：
<select id="mySelect">
<option value="Option 1">选项1</option>
<option value="Option 2">选项2</option>
<option value="Option 3">选项3</option>
</select>
<script>
$('#mySelect').select2({
tags: true, //启用添加新选项
allowClear: true //允许清除选择
});
</script>
tags: true选项使组合框可编辑，允许用户添加初始列表中不存在的新选项。allowClear: true选项提供了一种清除选择的方法。
增强您的可编辑组合框
无论您选择哪种方法，请考虑以下增强功能：
- 持久性：使用本地存储或服务器端数据库存储选项，以便在会话之间保留它们。
- 验证：实现输入验证以防止无效条目。
- 样式：使用CSS自定义外观，以无缝集成到您的应用程序设计中。
- 远程数据源：对于大型数据集，使用AJAX调用动态获取选项。