首先在html中的form表单中加上action=“#” js通过submit()触发即可,具体代码如下:
HTML:
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form" action="#">
<div class="weui-search-bar__box">
<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
</div>
JS:
//点击搜索之后再次搜索
$("form").submit(function(){
var keyword = $("#searchInput").val();
console.log(keyword);
$.ajax({
url:"/index.php/App/search/searchUser",
type:"post",
dataType:"json",
async:true,
data:{keyword:keyword},
success:function(data){
console.log(data);
//数据预处理
formateData(data.value.list,"username");
var htmlUsers = template("usersId",data);
$(".content .users").html(htmlUsers);
if(data.value.count==0){
$(".icon-box").css({
"display":"block"
});
$(".weui-cells__title").css({
"display":"none"
})
}else{
$(".icon-box").css({
"display":"none"
});
$(".weui-cells__title").css({
"display":"block"
})
};
//数据预处理方法
function formateData(data,key){
for(var i=0;i<data.length;i++){
var thisReg = eval("/"+keyword+"/g");
data[i][key] = data[i][key].replace(thisReg,"<span class='text-red'>"+keyword+"</span>")
};
}
}
})
return false;
});