datalist是HTML5提供的用于为input输入框提供预定义选项列表的标签，默认情况下输入框既可以输入自定义内容，也可以从下拉列表中选择预设选项。如果业务要求只能从下拉列表中选择，不允许用户自由输入，需要额外添加逻辑处理。
datalist基础使用回顾
先来看一个标准的datalist使用示例，这是后续修改的基础：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>datalist基础示例</title>
</head>
<body>
<label for="city">选择城市：</label>
<input type="text" id="city" list="cityList">
<datalist id="cityList">
<option value="北京">
<option value="上海">
<option value="广州">
<option value="深圳">
</datalist>
</body>
</html>
上面的代码中，input的list属性关联了datalist的id，输入框会展示datalist中的选项，但用户仍然可以输入列表中不存在的内容。
方案一：输入时校验匹配选项
通过监听输入框的输入事件，判断当前输入内容是否在datalist的选项列表中，如果不在则清空输入或者还原为上一次的有效值。这种方案兼容性较好，支持所有主流浏览器。
实现步骤如下：
- 先获取datalist中的所有选项值，存到一个数组中
- 监听input的
input事件，每次输入时比对当前值是否在选项数组中 - 如果不在数组中，就清空输入框或者设置为空值
具体代码实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>datalist限制输入方案1</title>
</head>
<body>
<label for="city">选择城市：</label>
<input type="text" id="city" list="cityList">
<datalist id="cityList">
<option value="北京">
<option value="上海">
<option value="广州">
<option value="深圳">
</datalist>
<script>
// 获取datalist中的所有选项值
const datalist = document.getElementById('cityList');
const options = Array.from(datalist.options).map(option => option.value);
const input = document.getElementById('city');
// 监听输入事件
input.addEventListener('input', function() {
const currentValue = this.value;
// 判断当前值是否在选项列表中
if (!options.includes(currentValue)) {
// 不在列表中则清空输入
this.value = '';
// 也可以给出提示
console.log('请输入列表中的选项');
}
});
</script>
</body>
</html>
方案二：使用change事件配合下拉选择
datalist在用户选择选项时会触发change事件，我们可以结合这个事件，只允许用户通过选择下拉选项来赋值，禁止手动输入。这种方案体验更好，用户不会看到输入后被清空的情况。
实现逻辑：
- 记录输入框的初始值或者上一次的有效值
- 监听
change事件，判断当前值是否是选项列表中的值 - 如果不是选项列表中的值，就还原为上一次的有效值
具体代码实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>datalist限制输入方案2</title>
</head>
<body>
<label for="city">选择城市：</label>
<input type="text" id="city" list="cityList">
<datalist id="cityList">
<option value="北京">
<option value="上海">
<option value="广州">
<option value="深圳">
</datalist>
<script>
const datalist = document.getElementById('cityList');
const options = Array.from(datalist.options).map(option => option.value);
const input = document.getElementById('city');
// 记录上一次的有效值，初始为空
let lastValidValue = '';
input.addEventListener('change', function() {
const currentValue = this.value;
// 判断当前值是否在选项列表中
if (options.includes(currentValue)) {
// 是有效值，更新记录
lastValidValue = currentValue;
} else {
// 不是有效值，还原为上一次的有效值
this.value = lastValidValue;
console.log('请选择列表中的选项');
}
});
</script>
</body>
</html>
两种方案对比
两种方案各有适用场景，我们可以通过下面的表格对比：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 输入时校验 | 实时限制，用户无法输入非选项内容 | 输入非选项内容会被直接清空，体验稍差 | 严格要求只能输入预设选项的场景 |
| change事件校验 | 输入过程中不会打断用户，体验更好 | 用户手动输入后需要失去焦点才会被校验还原 | 对输入体验要求较高的场景 |
注意事项
需要注意datalist的选项值如果是动态加载的，需要在选项加载完成后再获取选项数组，避免获取到空数组导致校验失效。另外如果输入框需要支持模糊搜索选项，可以结合输入事件动态过滤datalist的选项，同时保留限制自由输入的逻辑。