<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>

  <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>