城市选择框

针对城市个数非常多，下拉框速度慢！效果图如下：

1、引入js

   

如果需要将中文翻译成拼音再引入：pinyin.js

2、<div class="col-sm-2">
                                   <!-- 为了往后台传值 -->
                                   <input type="hidden" id="toCityCode">
                                   <div class="input-group">
                                    <div class="input-group-btn">
                                        <lable data-toggle="dropdown" class="btn btn-white dropdown-toggle"
                                                type="button">到达城市
                                        </lable>
                                    </div>
                                     <div class="city-select" id="single-select-2" style="margin-left: 8px;">
                                        <div class="city-info">
                                            <div class="city-input">
                                                <input type="text" class="input-search" value="" placeholder=" " />
                                            </div>
                                        </div>
                                        <div class="city-pavilion hide">
                                            <div class="city-cont">
                                                <p>*可以直接搜索查找城市（支持名称、拼音模糊搜索）<a href="javascript:;">清空</a>                                                                  <span>5</span></p>
                                                <div class="city-tips">最多只能选择<span>5</span>项</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div >

3、var ajax = new $ax(Feng.ctxPath + "/Slisdnd/Seldata",
               function(data){
                cityData2=data;
                data3=data;
                for(var i=0;i<cityData2.length;i++){
                    cityData2[i]["name"]=cityData2[i]["cityName"];
                    cityData2[i]["shortName"]=cityData2[i]["cityName"];
                    cityData2[i]["pinyin"]=cityData2[i]["cityName"].toPinYin().toLowerCase();
                    cityData2[i]["letter"]=cityData2[i]["cityName"].toPinYin().substring(0,1);
                    cityData2[i]["id"]=i;
                    delete cityData2[i]["cityName"];
                }
                    });
            ajax.start();

     // 到达城市
     singleSelect2 = $('#single-select-2').citySelect({
        dataJson: cityData2,
        multiSelect: false,
        whole: true,
        shorthand: true,
        search: true,
        placeholder: '请选择城市',
        searchPlaceholder: '输入城市关键词搜索',
        hotCity:['北京','上海','天津','重庆','长沙','长春','成都','福州','广州','贵阳','呼和浩特','哈尔滨','合肥','杭州','海口','济南','昆明','拉                         萨','兰州','南宁','南京','南昌','沈阳','石家庄','太原','乌鲁木齐南','武汉','西宁','西安','银川','郑州','深圳','厦门'],
        onInit: function () {
            //console.log(this);
        },
        onTabsAfter: function (target) {
            //console.log(target);
        },
        onCallerAfter: function (target, values) {
            var cityCode=cityData2[values.id]["cityCode"];
            $("#toCityCode").val(cityCode);
        }
    });
    //回写到达城市
    singleSelect2.setCityVal('成都',cityData2);
    var cityId=(singleSelect2.getCityVal().id)[0];
    var cityCode=cityData2[cityId]["cityCode"];
    $("#toCityCode").val(cityCode);

   说明：singleSelect2为全局变量方便回写等 、cityData2为后台返回的json数据