码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-10-14 14:17:18      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

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

标签:

原文地址:http://www.cnblogs.com/jlj9520/p/4877209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!