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