JS实现模糊查询带下拉匹配效果实现模糊查询带下拉匹配效果
“搜索”可以使我们更快的找到某一个关键词或者某一个商品，所以“模糊查询”和“下拉匹配”也成了前端必备的一个小技能，开门
见山，希望对朋友们有帮助。
—搜索框模糊查询带下拉匹配效果html—
<!------------搜索框模糊查询带下拉匹配效果html---------------------->
<div class="gover_search">
<div class="gover_search_form">
<form action="#" method="post" name="searchform" id="searchform" class="searchinfo">
<ul>
<li>
<input type="text" id="tt" value="" class="text" autocomplete="off" />
<p class="search"><img src="img/search-1.png" alt=""></p>
<p class="camera"><img src="img/camera.png" alt=""></p>
</li>
<li class="searchBtns-1"><img src="img/searchBtn.png" alt=""></li>
</ul>
</form>
</div>
</div>
—搜索框模糊查询带下拉匹配效果-css—
.fl {float: left;}
.fr {float: right;}
.clearfix:after { content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix { zoom: 1}
.mar0 { margin: 0 auto;}
.pos1 {position: relative;}
input {
border: none;
outline: none;
}
.w100 {width: 100%;}
.gover_search{
width: 420px;
position: relative;
border-radius: 20px;
height: 42px;
border: 2px solid #fb6910;
background:#fff;
margin-top: 50px;
margin-left: 90px;
}
.searchinfo ul{
list-style: none;
}
.gover_search_form {
height: 37px;
width: 420px;
position: relative;
}
/*输入框*/
.searchinfo .text{
margin: 0;
width: 334px;
height: 38px;
outline: none;
vertical-align: middle;
float: left;
padding-left: 27px;
line-height: 40px;
margin-left: 16px;
}
/*搜索按钮*/
.searchinfo .button {
width: 120px;
height: 40px;
border: none;
background-color: #4b140d;
资源评论
