代码：城市名称的联想下拉框。可按拼音搜索、按汉字搜索，是一种很简单的实现方式...

代码：城市名称的联想下拉框。可按拼音搜索、按汉字搜索，是一种很简单的实现方式

城市名称的联想下拉框。可按拼音搜索、按汉字搜索，是一种很简单的实现方式

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".cityname").keyup(function(){
        var key = $.trim($(this).val());
        console.log(key);
        $(".city-list .city-item").each(function(){
            if( $(this).attr('data-en').indexOf( key )>-1 ||  $(this).attr('data-ch').indexOf( key )>-1  ){
                $(this).show();
            }else{
                $(this).hide();
            }
        });
    });
});
</script>
<input type="text" name="" value="" class="cityname">
<ul class="city-list">
    <li class="city-item" data-en="beijing" data-ch="北京">北京</li>
    <li class="city-item" data-en="beiping" data-ch="北平">北平</li>
    <li class="city-item" data-en="beihai" data-ch="北海">北海</li>
    <li class="city-item" data-en="nanjing" data-ch="南京">南京</li>
    <li class="city-item" data-en="nanchang" data-ch="南昌">南昌</li>
    <li class="city-item" data-en="nanchangdalitang" data-ch="南昌大礼堂">南昌大礼堂</li>
</ul>

 

 

..

posted on 2016-05-27 14:49 bjhhh 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/qq21270/p/5534616.html