运用datalist标签实现用户的搜索列表

datalist是一个很强大的HTML5标签，支持一般类似于模糊查询，以前都是需要js来做的。下面是一个datalist配合js的小例子，主要是实现用户是否存在，以及添加过程中是否重复的判断。

首先是datalis里面绑好数据以后，当用户双击文本框时是可以出现选择下拉框的，输入的时候也得判断是否存在这个用户。具体js如下：

 function add_account(){
     var account_name = $("#read_account").val();
     var option = document.getElementsByTagName('option');
     var sum = 0;
     for(var i=0;i<option.length;i++){
         if(account_name == option[i].value){
             sum = 1;
         }
     }
     if(sum == 0){
         alert("此用户不存在！");
         $("#read_account").val("");
     }
     else{
         var flag = check(6, account_name);
         if(flag.split('#')[0] == 'F'){
             alert(flag.split("#")[1]);
         }
         else{
             var text = $("#add_account").text();
             if(text.match(account_name) == null){
                 $("#add_account").append(account_name + "，");
             }
             else{
                 alert("重复了");
             }
         }
     }
 }

主要是在datalist里面查找option选项里面有没有文本框输入的值，然后去判断如果没有则提醒没有该用户。
后面部分是为了完成点击添加按钮时，自动添加到下面的div里面。具体html如下：

 <input id="read_account" list="read_list" placeholder="输入用户名(双击可选择)"/>
                              <button onclick="add_account()">添加</button>
                              <datalist id="read_list">
                                  <select id="" name="">
                                 {%for account in accountlist%}
                                 <option value="{{account.account_name}}" title="{{account.account_name}}（{{account.account_nickname}}" >

{{account.account_name}}（{{account.account_nickname}}）</option>
                                 {%end%}
                                 </select>
                             </datalist>
                             <div id="add_account" name="add_account" style="height:100px;width:300px;border:1px solid red;overflow-x:hidden"></div>