select下拉框带搜索功能，并实现数据动态加载，选中效果（带搜索框的jQuery下拉框美化插件 searchable）

一、使用searchable插件

下载：带搜索框的jQuery下拉框美化插件 searchable，https://www.jq22.com/plugin/7063

二、核心代码

1.静态页面核心代码

代码如下（示例）：

    <div style="display: inline-block">
        <select id="selector">
            <option value="-1">请选择</option>
        </select>
    </div>

    <div style="display: inline-block">
        <select id="selector2">
            <option value="-1">请选择</option>
        </select>
    </div>

2.JQ核心代码

代码如下（示例）：

function initCity(startcity,endcity){
	$("#selector").empty(); //置空select框，避免搜索后重复
	$("#selector2").empty();
	 $.ajax({
	        type: "GET",
	        url: 'xxxxxxxx',
	        dataType:'json',
	        cache: false,
	        async: false,//让ajax先执行
	        success: function(data){
	        	var jon = JSON.parse(data.resultData);
	        	 for (let i = 0; i < jon.length; i++) {
	        		if(jon[i].cityName == '1'){//默认选中项
	        			$("#selector").append("<option value='"+jon[i].pinyin+"' selected=true >"+jon[i].cityName+"</option>");
	        		}else{
	        			$("#selector").append("<option value='"+jon[i].pinyin+"'>"+jon[i].cityName+"</option>");
	        		}		
	        	} 
	        }
	    }); 
	 $('#selector').searchableSelect();
     $('#selector2').searchableSelect();
}

3.获取select框的值

    var startcity = $("#selector option:selected").text(); //获取select option的值
    var endcity = $("#selector2 option:selected").text(); //获取select option的值