如何实现 模糊搜索 当我们浏览网页的时候,通常能看到搜索栏,这大大的提高了我们获取数据的目的性。
那如何去实现一个简单的模糊搜索 框呢,以下案例获取能给你一点思路。
以下案例,可以实现当按键按下时,自动检索匹配数据
基本css 样式
.row {
height: 80px;
*/\* line-height: 80px; \*/*
text-align: left;
line-height: 80px;
padding-top: 5px;
margin-bottom: 10px;
}
.inh {
width: 70px;
height: 70px;
border: 1px solid blanchedalmond;
border-radius: 5px;
line-height: 70px;
text-align: center;
margin-right: 30px;
}
img {
width: 100%;
height: 100%;
}
基本的html 样式
<div class="search_box"><i class="fa fa-arrow-left ftop"></i>
<form action="#">
<input type="text" id="index-to" placeholder="请输入搜索内容" autofocus>
<i class="fa fa-times fa=1gt rege"></i>
</form>
</div>
<div class="search_content search_default">
<ul id="view-to"></ul>
</div>
</div> |