简约搜索框模板
前言：
1. 这个模板使用jQuery来绑定点击事件，可以自行选择替换为vue、react或其他
2. 在搜索框外套了一层class='main'，并且设置html和.main的css，这样是为了使得搜索框左右、上下居中。
简约搜索框模板
前言：
1. 这个模板使用jQuery来绑定点击事件，可以自行选择替换为vue、react或其他
2. 在搜索框外套了一层class='main'，并且设置html和.main的css，这样是为了使得搜索框左右、上下居中。一定注意这个。
3. 注意控制SVG的大小，使得搜索框协调
效果：
代码：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content ="width = device-width" />
<title>gxg</title>
<script type="text/javascript" src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
</head>
<style lang="css">
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
background: #FFF5EE;
}
.main{
width: 100%;
height: 100%;
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
flex-direction: column;
position: relative;
}
/*搜索框*/
.searchBox{
background-color: #FFFFFF;
border-radius: 40px;
width: 50%;
float: left;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.searchSvg{
float: right;
width: 50px;
height: 50px;
border-radius: 40px;
/*background-color: rgba(20,162,245,0.5);*/
}
.searchSvg:hover{
background-color: rgba(20,162,245,0.5);
}
#searchInput {
color: #222;
border: none;
outline: none;
box-shadow: none;
width: 80%;
height: 48px;
border-radius: 20px;
background-color: #fff;
float: left;
margin-left: 5px;
font-family: inherit;
font-size: 100%;
}
</style>
<body>
<div class='main'>
<div id="search" class="searchBox">
<input id="searchInput" type="text" autocomplete="off" placeholder="请输入一段文本"/>
<svg t="1632978509362" class="searchSvg" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19082" width="200" height="200"><path d="M516.861569 0.511744C234.378811 0.511744 5.117441 229.773113 5.117441 512.255872s229.261369 511.744128 511.744128 511.744128 511.744128-229.261369 511.744128-511.744128S799.344328 0.511744 516.861569 0.511744zM332.121939 556.265867c-24.051974 0-44.009995-19.446277-44.009995-44.009995s19.446277-44.009995 44.009995-44.009995 44.009995 19.446277 44.009995 44.009995-19.446277 44.009995-44.009995 44.009995z m407.86007-31.216392l-153.011494 153.011495c-3.070465 3.582209-7.676162 5.629185-12.793603 5.117441-4.605697 0-9.211394-2.046977-12.793604-5.117441s-5.117441-7.676162-5.117441-12.793604v-92.113943H473.875062c-2.046977 0-4.093953 0.511744-6.140929 0.511744-33.775112 0-60.897551-27.122439-60.897551-60.897551s27.122439-60.897551 60.897551-60.897551c2.046977 0 4.093953 0 6.140929 0.511744h82.390805v-92.113943c0-4.605697 1.535232-9.211394 5.117441-12.793603s7.676162-5.117441 12.793604-5.117441c4.605697 0 9.211394 1.535232 12.793603 5.117441l153.011494 153.011494c3.582209 3.582209 5.117441 7.676162 5.117441 12.793603 0 3.582209-2.046977 8.187906-5.117441 11.770115z" fill="#14A2F5" p-id="19083"></path></svg>
</div>
</div>
<script type="text/javascript">
let old_query = "";
$("#searchInput").keyup(function(event) {
// enter，搜索框内按enter键对应事件
if (event.which == 13) {
$(".searchSvg").click()
}
});
$(".searchSvg").click(function(event) {
let query = $("#searchInput").val();
if(query=="" ||query==null||query==" "){
alert('请先输入文本！^_^'); //为空报错
}
else {
old_query = query;
$("#searchInput").val("");//清除输入的文本
alert('你输入了：'+query);
//......插入自己的代码
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号