html5中的datalist

<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 " />

</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.'); 
    } 
  }); 
}