jQuery - 在鍵盤上僅顯示一次加載圖像

我有一個keyup函數來搜索表中的數據。我想讓加載圖像只出現一次。例如，如果用戶輸入"one"，圖像將只顯示一次，直到顯示結果。jQuery - 在鍵盤上僅顯示一次加載圖像

我可以在keyup函數上顯示圖像，但它會根據用戶類型顯示。例如，如果用戶輸入"one"，圖像將出現3次。下面是我的代碼示例中，

$("#search").keyup(function(){ 
    var search = $("#search").val(); 
    $("#loading").fadeIn(500); 
    $.post('search_pr.php', 
    { 
     search : search 
    }) 
    .done(function(data){ 
     $("#loading").fadeOut(500); 
     $("#body").html(data); 
    }); 
});

來源

2016-08-04 Amran

的狀態，您可以使用標誌爲此，

$(function(){ 
 
var load_img = false; 
 
$("#search").keyup(function(){ 
 
    var search = $("#search").val(); 
 
    
 
    if(!load_img) { 
 
     $("#loading").show();  
 
    } 
 
    load_img = search.length === 0 ? false : true; 
 
    
 
    if(search.length === 0){ 
 
    $("#loading").hide(); 
 
    } 
 

 
    // Rest of your code goes here 
 

 
    }); 
 
});

#loading{ 
 
    display:none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="search" placeholder="search"> 
 
<div id="loading"> 
 
<i class="fa fa-spinner fa-spin"></i> 
 
    </div>

但是，您應該復位該標誌上輸入的 focusout or change or blue和 load_img到假當 length = 0爲好，以便標誌不能結合到僅 true當它成爲真正當用戶鍵入關鍵字。

復位標誌

$("#search").on("change",function(){ 
    load_img = false; 
});

希望這有助於。

來源

2016-08-04 04:35:13

感謝您的幫助。對不起，但我仍然在學習使用jQuery。我可以知道如何重置load_img，或者如果您有任何參考。 – Amran

從開始再次檢查答案我更新了所有您需要的代碼。我想我可以得到+1這個謝謝 –

對不起！我再次更新答案！ –

使用全局變量設置附加元素

var isTriggered = 0 

$("#search").keyup(function(){ 
    if (isTriggered == 0) { 
    isTriggered = 1; 
    var search = $("#search").val(); 
    $("#loading").fadeIn(500); 
    $.post('search_pr.php', 
    { 
     search : search 
    }) 
    .done(function(data){ 
     $("#loading").fadeOut(500); 
     $("#body").html(data); 
    }); 
} 
});

來源

2016-08-04 04:34:34 madalinivascu

jQuery - 在鍵盤上僅顯示一次加載圖像

回答

相關問題