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

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>