<input autocomplete="off" list="user_list" type="text" id="seaUserName" />
<datalist id="user_list">
<option label="aa" value="aaa " />
<option label="bb" value="bbb" />
<option label="cc" value="ccc " />
var inputs = document.querySelectorAll('input[list]');
for (var i = 0; i < inputs.length; i++) {
//当输入文本框的值发生改变
inputs[i].addEventListener('change', function() {
var optionFound = false,
datalist = this.list;
//判断用户的输入是否存在于datalist的下拉列表框的数据项中
for (var j = 0; j < datalist.options.length; j++) {
if (this.value == datalist.options[j].value) {
optionFound = true;
break;
}
}
使用IE 10的Validation API中的setCustomValidity方法对是否存在合法的输入值进行前端的响应展示
if (optionFound) {
this.setCustomValidity('');
} else {
//如果用户的输入不在datalist列表中,前端显示相关错误信息
this.setCustomValidity('Please select a valid value.');
}
});
}
<datalist id="user_list">
<option label="aa" value="aaa " />
<option label="bb" value="bbb" />
<option label="cc" value="ccc " />
</datalist>
label的值不能和value的值一样,不然就显示不出来了。autocomplete是让浏览器是否记住前面你输入的内容
限制用户在下拉自动提示列表中所选择的值
// 找出所有绑定了datalist的input文本框
var inputs = document.querySelectorAll('input[list]');
for (var i = 0; i < inputs.length; i++) {
//当输入文本框的值发生改变
inputs[i].addEventListener('change', function() {
var optionFound = false,
datalist = this.list;
//判断用户的输入是否存在于datalist的下拉列表框的数据项中
for (var j = 0; j < datalist.options.length; j++) {
if (this.value == datalist.options[j].value) {
optionFound = true;
break;
}
}
使用IE 10的Validation API中的setCustomValidity方法对是否存在合法的输入值进行前端的响应展示
if (optionFound) {
this.setCustomValidity('');
} else {
//如果用户的输入不在datalist列表中,前端显示相关错误信息
this.setCustomValidity('Please select a valid value.');
}
});
}