jquery下拉模糊搜索

来源:互联网 发布:淘宝优惠券名称怎么写 编辑:程序博客网 时间:2024/05/22 03:30




<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport"content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <title></title>

    <script src="js/jquery-1.10.2.min.js"></script>

   

</head>

    <body>

       <inputid="searchCityName"style="width:100%;"type="text"placeholder="中文 "/> 

  <ul

  <li cityname="北京"><ahref="">北京 </a></li

  <li cityname="北京2"><ahref="">北京2 </a></li

  <li cityname="上海"><ahref="">上海 </a></li

  <li cityname="济南"><ahref="">济南 </a></li

  <li cityname="广州"><ahref="">广州 </a></li

  <li cityname="金华"><ahref="">金华 </a></li

  <li cityname="武汉"><ahref="">武汉 </a></li

  <li cityname="南京"><ahref="">南京 </a></li

  <li cityname="深圳"><ahref="">深圳 </a></li

  </ul>

  <script>

    function searchCity() {

        var searchCityName = $("#searchCityName").val();

        if (searchCityName == "") {

            $("ul li").show();

        } else {

            $("ul li").each(function() {

                var cityName = $(this).children("a").html();

                if(cityName.indexOf(searchCityName)!= -1) {

                    $(this).show();

                } else {

                    $(this).hide();

                }

            });

        }

    }

    $('#searchCityName').bind('input propertychange',function() {

        searchCity();

    });

  </script>

    </body>

</html>

1 0
原创粉丝点击