我已经编写了以下代码,可以通过ajax进行搜索。当键被触发时,在500ms后发出ajax请求。但搜索动画并没有停止(hide()
方法)。
$('#mainsearch .searchinput').keyup(function(e) {
if (e.which !== 0) {
var searchval = $(this).val().trim();
if(aSearch[searchval]) {
$('#mainsearch #sugbox #sugres').html(aSearch[searchval]);
}else if(prevs !== searchval) {
prevs = searchval;
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(function() {search(searchval)}, 500);
$(this).data('timer', wait);
}
}
});
function search(searchval) {
console.log("searching for "+searchval)
if(lastrequest && lastrequest.readystate != 4){ // abort past requests
lastrequest.abort();
lastrequest = null;
delete lastrequest;
$('#mainsearch #finding').hide();
}
if(searchval != "") { // make an ajax call
lastrequest = $.ajax({
url:"/ajaxsearch.php?key_word="+searchval,
type: "GET",
dataType:'json',
cache:true,
beforeSend:function() {
$('#mainsearch #finding').delay(400).show(0);
},
complete: function(jqXHR, status){
console.log('complete');
$('#mainsearch #finding').hide();
},
success:function(result){
$('#mainsearch #finding').hide();
if(result.length > 0 ) {
var outp = searchParse(result);
$('#mainsearch #sugbox #sugres').html(outp);
aSearch[searchval] = outp;
} else
$('#mainsearch #sugbox #sugres').html('<li><a href="#"> Not Found </span></a></li>');
$('#mainsearch #finding').hide();
},
error : function (xhr, ajaxOptions, thrownError) {
$('#mainsearch #finding').hide();
}
});
}
}
我在搜索中得到了理想的结果而没有错误。但是hide()
并没有隐藏动画。但是,输入$('#mainsearch #finding').hide();
会隐藏动画。
注意:此处#mainsearch #finding
是一个由css3设置动画的div。
答案 0 :(得分:1)
带走延迟,我认为ajax的回报速度比延迟快......
$('#mainsearch #finding').delay(400).show(0);
$('#mainsearch #finding').show(0);