标签：
datalist是一个很强大的HTML5标签，支持一般类似于模糊查询，以前都是需要js来做的。下面是一个datalist配合js的小例子，主要是实现用户是否存在，以及添加过程中是否重复的判断。
首先是datalis里面绑好数据以后，当用户双击文本框时是可以出现选择下拉框的，输入的时候也得判断是否存在这个用户。具体js如下：
1 function add_account(){ 2 var account_name = $("#read_account").val(); 3 var option = document.getElementsByTagName(‘option‘); 4 var sum = 0; 5 for(var i=0;i<option.length;i++){ 6 if(account_name == option[i].value){ 7 sum = 1; 8 } 9 } 10 if(sum == 0){ 11 alert("此用户不存在！"); 12 $("#read_account").val(""); 13 } 14 else{ 15 var flag = check(6, account_name); 16 if(flag.split(‘#‘)[0] == ‘F‘){ 17 alert(flag.split("#")[1]); 18 } 19 else{ 20 var text = $("#add_account").text(); 21 if(text.match(account_name) == null){ 22 $("#add_account").append(account_name + "，"); 23 } 24 else{ 25 alert("重复了"); 26 } 27 } 28 } 29 }
主要是在datalist里面查找option选项里面有没有文本框输入的值，然后去判断如果没有则提醒没有该用户。
后面部分是为了完成点击添加按钮时，自动添加到下面的div里面。具体html如下：
1 <input id="read_account" list="read_list" placeholder="输入用户名(双击可选择)"/> 2 <button onclick="add_account()">添加</button> 3 <datalist id="read_list"> 4 <select id="" name=""> 5 {%for account in accountlist%} 6 <option value="{{account.account_name}}" title="{{account.account_name}}（{{account.account_nickname}}" >
{{account.account_name}}（{{account.account_nickname}}）</option> 7 {%end%} 8 </select> 9 </datalist> 10 <div id="add_account" name="add_account" style="height:100px;width:300px;border:1px solid red;overflow-x:hidden"></div>
标签：
原文地址：http://www.cnblogs.com/jlj9520/p/4877209.html
