前端搜索功能（二）

最新推荐文章于 2024-04-23 09:58:36 发布

M_SSY

最新推荐文章于 2024-04-23 09:58:36 发布

阅读量1.1k

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/M_SSY/article/details/80492425

版权

jQuery 专栏收录该内容

32 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>实时查询城市通过姓名或拼音简写</title>
	</head>

	<body>
		<input id="searchCityName" style="width: 30%;" type="text" placeholder="中文 / 拼音首字母" />
		<ul>
			<li pinyin="bj" cityname="北京">
				<a href="/cityBranch/12.html">北京 </a>
			</li>
			<li pinyin="dl" cityname="大连">
				<a href="/cityBranch/14.html">大连 </a>
			</li>
			<li pinyin="sh" cityname="上海">
				<a href="/cityBranch/13.html">上海 </a>
			</li>
			<li pinyin="jn" cityname="济南">
				<a href="/cityBranch/15.html">济南 </a>
			</li>
			<li pinyin="gz" cityname="广州">
				<a href="/cityBranch/17.html">广州 </a>
			</li>
			<li pinyin="jh" cityname="金华">
				<a href="/cityBranch/18.html">金华 </a>
			</li>
			<li pinyin="wh" cityname="武汉">
				<a href="/cityBranch/19.html">武汉 </a>
			</li>
			<li pinyin="nj" cityname="南京">
				<a href="/cityBranch/20.html">南京 </a>
			</li>
			<li pinyin="sz" cityname="深圳">
				<a href="/cityBranch/22.html">深圳 </a>
			</li>
			<li pinyin="tj" cityname="天津">
				<a href="/cityBranch/21.html">天津 </a>
			</li>
			<li pinyin="cd" cityname="成都">
				<a href="/cityBranch/24.html">成都 </a>
			</li>
			<li pinyin="ly" cityname="临沂">
				<a href="/cityBranch/25.html">临沂 </a>
			</li>
			<li pinyin="cc" cityname="长春">
				<a href="/cityBranch/26.html">长春 </a>
			</li>
			<li pinyin="hz" cityname="杭州">
				<a href="/cityBranch/27.html">杭州 </a>
			</li>
			<li pinyin="nb" cityname="宁波">
				<a href="/cityBranch/28.html">宁波 </a>
			</li>
			<li pinyin="qd" cityname="青岛">
				<a href="/cityBranch/29.html">青岛 </a>
			</li>
			<li pinyin="sy" cityname="沈阳">
				<a href="/cityBranch/33.html">沈阳 </a>
			</li>
		</ul>
	</body>

</html>
<script src="../jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	function searchCity() {
		var searchCityName = $("#searchCityName").val();
		if(searchCityName == "") {
			$("ul li").show();
		} else {
			$("ul li").each(function() {
				var pinyin = $(this).attr("pinyin");
				var cityName = $(this).attr("cityName");
				if(pinyin.indexOf(searchCityName) != -1 ||
					cityName.indexOf(searchCityName) != -1) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
		}
	}
	$('#searchCityName').bind('input propertychange', function() {
		searchCity();
	});
</script>