datalist标签使用

jsp使用datalist标签写可查询可输入下拉框样式。

需求

jsp页面实现可选择,可查询,可输入的下拉选择框,

1. 一段废话 本来想用select看看有什么属性可以实现,但基本上接触的都是选择下拉的样式,没有可输入,可搜索的功能,其实如果用vue的话很方便,element组件真的yyds,但是项目用jsp,只能另想它法,无意看到datalist标签,发现真的很nice,完全符合需求,中间用的时候有点曲折,在这里记录下来；

用法

       <label for="countys" class="col-xs-1 control-label">区/县</label>
       <div class="col-xs-3">
         <input id="countys" type="text" name="countys" list="countyList" class="form-control mark_sel">
         <datalist id="countyList" name="countyList" >
         </datalist>
       </div>
<script type="text/javascript">
            $.ajax({
             type: "post/get",
             url: XXXXXX',
             contentType: "charset=utf-8;",
             data: JSON.stringify(json),
             success: function(data){
                  var depts = data.data;
                  $("#countyList").empty();
   		          $("#countys").attr("placeholder","---请选择---");
   		          for(var i=0; i<depts.length; i++){
   			            var dept = depts[i];
   			            var dept_name = dept["name"];
   			            var dept_pid = dept["code"];
   			            $("#countyList").append("<option value='"+dept_name+"' data-id='"+dept_pid+"'></option>");
                   }
             })
</script>

这里有个 data-id 这个属性是我加的,因为业务需要,我要存接口中的两个字段值,一个name ,一个code,name的话 就是在页面中选项展示的值,code是实际操作的值,我在另一个接口需要获取选中的code值,
因为这里datalist标签value值就是展示在前端页面的值,所以只能将name存到value中,data-id存的是我需要操作的值,
在我的理解中,datalist标签是将选中的value值赋值给相应的input标签中去,然后页面中实际上展示的是input输入框的value值,所以我们基本上能获取的也就是input的value值 name属性,
如何获取datalist中的data-id值?

  $('#countys').change(function () {
   alert(  $('#countyList option[value='+ this.value +']').attr('data-id'))
   })

实际上只需要这一行代码就可以了 哈哈哈哈, 这个我放在了datalist的change方法中 ,其实挺简单的,但是datalist真的好用.