12306城市选择框

点击查看效果

1、页面结构:

 <div style="width: 26%;margin:100px auto;">
        城市拼音：<input type="text" id="txt_value" /><br/> <br/>
        <div class="yxcdv1" style="width: 100%;">
            <div class="ac_title">
                <span>拼音支持首字母输入</span> <a class="ac_close" style="cursor: pointer" title="关闭" id="yxcclose">
                </a>
            </div>
            <ul class="AbcSearch clx" id="abc">
                <li index="1" id="nav_list1" class="action">A－E</li>
                <li index="2" id="nav_list2" class="">F－J</li>
                <li index="3" id="nav_list3" class="">K－O</li>
                <li index="4" id="nav_list4" class="">P－T</li>
                <li index="5" id="nav_list5" class="">U－Z</li>
            </ul>
            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;
                display: block;" id="ul_list1">
                <li class="ac_even itemLi" title="北京" data="beijing" category="1" >北京</li>
                <li class="ac_even itemLi" title="重庆" data="chongqing" category="1">重庆</li>
            </ul>
            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;
                display: none;" id="ul_list2">
                <li class="ac_even itemLi" title="广州" data="guangzhou" category="2">广州</li>
                <li class="ac_even itemLi" title="广西" data="guangxi" category="2">广西</li>
            </ul>
            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;
                display: none;" id="ul_list3">
            </ul>
            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;
                display: none;" id="ul_list4">
            </ul>
            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;
                display: none;" id="ul_list5">
            </ul>
            <ul class="popcitylist" style="max-height: 300px; height: 300px; display: none; text-align: center;
                line-height: 300px;" id="ul_list0">
                没有匹配的城市
            </ul>
        </div>
    </div>

2、JS

  <script type="text/javascript">
        $(function () {
            $(".itemLi").click(function () {
                var showTxt = $.trim($(this).text());
                $("#txt_value").val(showTxt);
            });
            $("#abc li").click(function () {
                var categoryIndex = $(this).attr("index");
                showLi(categoryIndex);
            });
            var cityList = [];

            (function () {
                $(".itemLi").each(function () {
                    var citypinyin = $(this).attr("data") + "-" + $(this).attr("category");
                    cityList.push(citypinyin);
                });
            })();

            $("#txt_value").keyup(function () {
                var v = $.trim($(this).val()).toLocaleLowerCase();
                toChange(v);
            });

            function toChange(searchTxt) {
                var cityPinYin = "";
                var categoryIndex = 0;

                if (searchTxt) {
                    $(".itemLi").css("color", "");
                    for (var index in cityList) {
                        var cityPY = cityList[index];
                        // document.title = cityPY.indexOf(searchTxt);
                        if (cityPY.indexOf(searchTxt) == 0) {
                            cityPinYin = cityPY.split('-')[0];
                            categoryIndex = cityPY.split('-')[1];
                            $(".itemLi").each(function () {
                                if ($(this).attr("data") == cityPinYin) {
                                    $(this).css("color", "red");
                                }
                            });
                        }

                    }
                }
                else { categoryIndex = 1; }
                showLi(categoryIndex);
            }

            function showLi(categoryIndex) {
                $(".popcitylist").hide();
                if (categoryIndex == 0) {

                    $("#ul_list0").show();
                }
                else {
                    $("#abc li").removeClass("action");
                    $("#nav_list" + categoryIndex).addClass("action");
                    $("#ul_list" + categoryIndex).show();

                }
            }

        })
    </script>