在H5开发中,经常会开发搜索功能,商品列表、订单列表、客户列表等等,都需要搜索,所以程序猿(程序媛)们都会遇到这样的需求,点击搜索input时,弹出的键盘,有“搜索”按钮,点击搜索调用接口搜索。今天就来讲讲怎么搞定这个需求。
<form action="javascript:;" id="searchFrom" onsubmit="searchList">
<input type="search" value="" placeholder="搜索Javan的博客" />
</form>
function searchList(){
// do something
}
$('#searchFrom').bind('submit', function () {
// do something
});
action="javascript:;"
这里的作用是,防止页面刷新,如果不写,页面会刷新type="search""
input的类型需要是searchinput[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none; // 此处只是去掉默认的小×
}
自定义样式
input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;
position: relative;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #EBEBEB;
}
input[type=search]::-webkit-search-cancel-button:after{
position: absolute;
content: 'x';
left: 25%;
top: -12%;
font-size: 20px;
color: #fff;
}