运用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;300px;border:1px solid red;overflow-x:hidden"></div>