景点【查找关键词】

最新推荐文章于 2020-11-19 00:18:33 发布

慧、新

最新推荐文章于 2020-11-19 00:18:33 发布

阅读量633

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Endeavor_No1/article/details/77923679

版权

js 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>scenery</title>
		<style>
			#out {
				display: flex;
				justify-content: center;
				margin-top: 100px;
			}
			
			#input {
				display: inline-block;
				text-align: center;
				height: 30px;
				width:200px ;
				border: 3px solid red;
				background: black;
				color: white;
			}
			
			#sea {
				display: inline-block;
				text-align: center;
				height: 38px;
				width:50px ;
				border: 3px solid red;
				background: black;
				color: white;
			}
			
			#noul {
				margin: 30px auto;
				font: 700 18px/30px "";
				border: 3px solid red;
				background: black;
				color: white;
				width: 800px;
				height: 500px;
			}
			
			#noul li {}
		</style>
	</head>

	<body>
		<div id="out">
			<input id="input" />
			<button οnclick="search()" id="sea">搜索</button>
		</div>
		<ul id="noul"></ul>
		<script>
			/*
			 1.先要遍历每个省
			 2，查找每个城市的内容是否有这个关键词
			 3.含有此关键词的省组成新的数组
			 4.重新渲染列表
			 * */
			function search() {
				var input = document.getElementById("input").value;
				var arr = [{
						province: "黑龙江省",
						city: "五大连池  哈尔滨太阳岛  东北虎林园  漠河北极村 哈尔滨冰雪大世界 牡丹江雪乡  镜泊湖风景区"
					},
					{
						province: "辽宁省",
						city: "长春-可怕  大连-老虎滩海洋公园 -星海广场-动物园（找黄牛便宜，不要买胡萝卜）"
					},
					{
						province: "江苏省",
						city: "南京-夫子庙(迷路n次)-中山陵-南京大屠杀纪念馆-玄武湖 苏州-旗袍-寒山寺（姑苏城）拙政园"
					}, //别买假证= =
					{
						province: "上海市",
						city: "东方明珠广播电视塔 -外滩-外滩-南京路步行街-田子坊（蚊子聚集地）"
					},
					{
						province: "浙江省",
						city: "杭州-西湖（晚上喷泉一定要看7:00  8:00）-灵隐寺-雷峰塔-宋城-四季（中国两大服装厂之一）嘉兴-月河-西塘-乌镇 舟山-普陀山（佛教圣地）"
					},
					{
						province: "江西省",
						city: "南昌-滕王阁"
					},
					{
						province: "广东省",
						city: "深圳 珠海 肇庆 （吃吃吃= =好多花）"
					},
					{
						province: "香港",
						city: "香港迪斯尼乐园-香港海洋公园-香港会议展览中心、金紫荆广场-尖沙咀海滨花园-星光大道-旺角-浅水湾"
					},
					{
						province: "海南省",
						city: "各大沙滩= =天涯海角-亚龙湾-椰林-三亚"
					}
				];
				var newArr = [];
				arr.forEach(function(item, index) {
					//遍历每一个省
					console.log(item.city);
					//关键字
					if(item.city.indexOf(input) >= 0) { //返回出现位置，若为-1，则没有。
						newArr.push(item)
					}
				})
				
				
				var ne = newArr.map(function(item, index) {
					return "<li>" + item.province + "<br/>" +item.city + "</li>"
				})
			
				document.getElementById("noul").innerHTML = ne.join("");
			}
		</script>
	</body>

</html>

慧、新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
景点【查找关键词】

scenery #out { display: flex; justify-content: center; margin-top: 100px; } #input { display: inline-block; text-align: center; height: 30px; width:200px ;
复制链接

扫一扫

专栏目录