缘起

如题，今天帮一个朋友写搜索框，本来以为网上应该能搜索到大量现成代码，没想到并没有找到（可能是我的搜索词不合适），所以就写篇文章记录下代码，分享出来以便于网友们学习使用。

---

先看下效果：

预览

电脑

手机

代码

	<div class="container">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
		<style>
	.hidden{
    	display: none;
    	}
	.container{
		width:auto;
		text-align: center;
	}
	.searchlabel{
		padding:7px 10px;
		font-weight: bold;
	}
	.nsearchlabel,.searchlabel:hover{
		padding:7px 10px;
		background:#fff;
		font-weight: bold;
		border-radius:3px;
		
	}
	label,.sspan{
		font-size: 15px;
		margin: 0;
		padding: 0;
	}
    .sq{
        margin:0 35%;
       text-align: left;
       white-space:nowrap;
    }
    .sq2{
        margin:0;
    	text-align: center;
       	display: inline-block;
       	white-space:nowrap;
       	background:#fff;
        border-radius:30px;
    	width:50vw;
    }
    .search{
    	font-size:15px;
    	line-height:20px;
    	height:50px;
    }
    .btn{
    	margin: 10px 3px 10px 7px;
    	height:35px;
    	width:10%;
    	background: #fe4365;
    	border-radius:20px;
    	color:#fff;
    }
    .btn i{
    	font-size: 18px;
    }
    .btn:hover{
    	color:#fff;
    	background: #e77e91
    }
    input{
    	background: translate;
    	margin: 15px 0;
    	padding: 0 0 0 15px;
    	width:85%;
    	border:none;
    	color:#9f9f9f;
    	outline:none;
    }
    @media screen and (max-width: 40em) {
    
    	.container{
    	margin: 0 0 0 -2.5vw;
		width:90vw;
		}
    	.sq{
    		margin: 0 5%;
    		overflow:scroll;
    		width:65vw;
    	}
    	.sq2{
    		margin: 0 0 0 -5vm;
    		width: 100%;
    		border-radius:25px;
    	}
    	.btn{
    		width:5em;
    		margin: 0 0 0 -10vw;
    	}
    	.input{
    		width: 100%;
    	}
    }
</style>
<div class="sq">
				<span class="sspan">搜索 > </span>
				<label class="nsearchlabel" data-target="baidu-search"><span>百度</span></label>
				<label class="searchlabel" data-target="google-search"><span>谷歌</span></label>
				<label class="searchlabel" data-target="sougou-search"><span>搜狗</span></label>
				<label class="searchlabel" data-target="bing-search"><span>必应</span></label>
				<label class="searchlabel" data-target="zhihu-search"><span>知乎</span></label>
			
</div>
<div class="sq2">
					<form class="search" id="baidu-search" action="https://www.baidu.com/s" method="get" target="_blank">
						<input placeholder="百度一下" type="text" name="wd" autocomplete="off" autofocus="autofocus"  value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
					<form class="search hidden" id="google-search" action="https://www.google.com/search" method="get" target="_blank">
						<input  placeholder="谷歌搜索" type="text" name="q" autocomplete="off" autofocus="autofocus" value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
					<form class="search hidden" id="sougou-search" action="https://www.sogou.com/web" method="get" target="_blank">
						<input placeholder="搜狗搜索" type="text" name="query" autocomplete="off" autofocus="autofocus"  value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
					<form class="search hidden" id="bing-search" action="https://cn.bing.com/search?" method="get" target="_blank">
						<input placeholder="Bing搜索" type="text" name="q" autocomplete="off" autofocus="autofocus"  value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
					<form class="search hidden" id="zhihu-search" action="https://www.zhihu.com/search" method="get" target="_blank">
						<input placeholder="知乎搜索" type="text" name="q" autocomplete="off" autofocus="autofocus"  value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
				</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>
    $("div").on("click","label",function(){
    	$("div label").each(function(){
    		$(this).attr("class","searchlabel");
    	});
    	$(this).attr('class','nsearchlabel');
		var id=$(this).attr("data-target");
		$("div form").each(function(){
			$(this).addClass("hidden");	
		});
		$("#"+id).removeClass("hidden");
		});
	
    </script>

注意，这里只是笔者在webstack中加入搜索框的代码，如果是在其他环境下使用请自行调整布局。

建了个QQ群，欢迎志同道合滴朋友们来闲聊
1054735139