$("#search").on('keyup',function (e) {
e.preventDefault();
if($(this).val().length > 0){
$.ajax({
type: "GET",
url: "search",
data: 'search='+$('#searchbar').val(),
success: function(data){
$('#search-result-display').html(data);
}
});
}
});
我現在遇到一個問題
雖然我有加入 if($(this).val().length > 0){
但是假設有五個字
他會發出請求五次。。。
等於是我會看到 search-result-display 這邊會動五次。。。
請問有什麼方式可以改善這個情形嗎？
已邀請的邦友 {{ invite_list.length }}/5
認真來說，你這樣的寫法的確一定會動5次。
如果是打算等輸入完在做處理的話，一般我會用所謂的延遲應用寫法。
只要將你的程式改寫成如下
var keyinTime;//此為需要事先定義要記錄的定時器
$("#search").on('keyup',function (e) {
var v = $(this).val();
e.preventDefault();
clearTimeout(keyinTime);//要清掉正在計時的事件，要不然會多重運行
keyinTime = setTimeout(function(){
if(v.length > 0){
$.ajax({
type: "GET",
url: "search",
data: 'search='+v,
success: function(data){
$('#search-result-display').html(data);
}
});
}
}, 1000);//秒數就看你要定義多久才運行，一般理想是800~1500的值。
});
用如上的寫法，在key時，並不會馬上有作用，需要停止keyin一段時間後才有動作。
這樣才是比較理想的方式。
上面的程式碼改寫一下
iThome鐵人賽
看影片追技術