jquery下拉框带搜索框

1.开发中会遇到下拉框中的数据很多，一个个找比较麻烦，所以下拉框携带可以模糊搜索的文本框就会事半功倍。

参考链接：https://blog.csdn.net/BigBoySunshine/article/details/88293931     

2.首先需要引入css和js文件，由于是基于jquery的所以引入文件的时候把jquery放到最前面，如下：

  <script type="text/javascript" src="<%=path %>/skin/jquery.js"></script>
  <link rel="stylesheet" href="<%=path %>/skin/selectSearch/css/jquery.searchableSelect.css">
  <script src="<%=path %>/skin/selectSearch/js/jquery.searchableSelect.js"></script>

3.html代码：

<div style="display: inline-block">
	 <select id="guojia" name="gj" style="width:250px;">
		<option value="-1">请选择</option>
	</select>
</div>

4.js代码：（注意：ajax加载数据到下拉框中后一定要初始化下拉框：$("#guojia").searchableSelect();//初始化下拉框）

$(function(){
    var guojiaVal = "${xunpanList.gj}";
	getGuojia(guojiaVal);//获取所有的国家
});


function getGuojia(guojiaVal){
	$.ajax({
	   	  //几个参数需要注意一下
	       type: "POST",//方法类型
	       dataType: "json",//预期服务器返回的数据类型
	       url: context+"/basedata/getGuojia",//url
	       success: function (res) {
	    	   resval=res;
	    	   if (res!=null) {
	               for(let i=0;i<res.length;i++){
	                   var keys = res[i].country_code;
	                   var values = res[i].cname;
	                   var sel = document.getElementById("guojia");//获取下拉选对象
	                   var option = new Option(values,keys);
	                   sel.options.add(option);
	               } 
	               $("#guojia").searchableSelect();//初始化下拉框
	               var opList = document.getElementById("guojia").childNodes;
	               for (var i = 0; i < opList.length; i++) {
	                   if (opList[i].value == guojiaVal) {
	                       opList[i].selected = true;
	                       break;
	                   }
				   }
	               $("#guojia").searchableSelect();//初始化下拉框
	       }
	    	   
	       },
	       error : function(e) {
	           alert("发生错误！");
	       }
	   });
}

到此就完成了，看一下效果：