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>

　　3 css

 .ac_title
        {
            margin: 1px;
            margin-bottom: 0;
            border-width: 0;
            padding: 6px 0 5px 15px;
            text-align: left;
            background-color: #eef1f8;
            position: relative;
            z-index: 100;
            color: #666;
        }
        a.ac_close
        {
            position: absolute;
            top: 6px;
            right: 9px;
            text-indent: -9999em;
            display: block;
            width: 19px;
            font: 1px/1px arial;
            height: 17px;
            background: url(../images/close2.jpg) 0;
            background-size: 19px;
        }
        ul
        {
            padding: 0;
            margin: 0;
            list-style-position: outside;
            list-style: none;
            z-index: 100;
        }
        li
        {
            padding: 2px 0 0 0;
            margin: 0;
            height: 25px;
            line-height: 25px;
            float: left;
            cursor: pointer;
            display: block;
            font-size: 12px;
            overflow: hidden;
            text-align: center;
            vertical-align: middle;
        }
        .AbcSearch
        {
            border-bottom: #66c8e8 solid 2px;
            background: #298cce;
            height: 25px;
        }
        .AbcSearch
        {
            padding: 5px 5px 0 5px;
        }
        .AbcSearch li
        {
            width: 38px;
            padding: 0 8px;
            color: #e6f9ff;
            height: 25px;
            line-height: 25px;
        }
        
        .yxcdv1
        {
            height: auto;
            border: 1px solid #298cce;
        }
        .popcitylist li
        {
            width: 80px;
        }
        .action
        {
            background: #66c8e8;
            border-radius: 5px 5px 0 0;
            -moz-border-radius: 5px 5px 0 0;
            -ms-border-radius: 5px 5px 0 0;
            -o-border-radius: 5px 5px 0 0;
            -webkit-border-radius: 5px 5px 0 0;
            font-weight: bold;
            color: #fff;
            margin-bottom: -1px;
            position: relative;
        }

　　4 效果图