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