如何在執行自動完成搜索時顯示加載圖標？

我需要在單獨的div中顯示該值（因此.ui-autocomplete-loading在此不適用）。我可以開始顯示search事件發生時。但我怎麼能理解它應該隱藏的時間？如何在執行自動完成搜索時顯示加載圖標？

2011-10-31 LA_

我假設您使用的是遠程數據源。如果是，請在您提供給source參數的功能中使用$.ajax。例如：

$("#auto").autocomplete({ 
    source: function(request, response) { 
     $("#loading").show(); // Where #loading is the loading indicator 

     $.ajax({ 
      url: "Your_URL_HERE", 
      data: request.term, 
      success: function(data) { 
       response(data); 
       $("#loading").hide(); 
      }, 
      error: function() { 
       $("#loading").hide(); 
      } 
     }); 
    } 
});

工作實施例：http://jsfiddle.net/gKFJU/

來源

2011-10-31 21:01:31

我嘗試這樣做，發現菜單更新之前加載部件有時會隱藏。我試圖將它隱藏在ajax'complete'事件上，但沒有任何改進。我所做的唯一工作就是將它隱藏在「open」和「close」自動完成事件中。任何想法爲什麼會這樣？該行爲似乎表明，在ajax完成後，菜單有時會延遲更新*。 – billynoah

@billynoah這是因爲比賽條件。例如：用戶鍵入「foo」，它觸發一個term =「foo」的XHR，然後鍵入「bar」，它觸發term =「foobar」的另一個XHR。假設「foo」請求先完成;這意味着你隱藏加載圖標。但是菜單不會顯示，因爲自動完成等待「foobar」請求完成以顯示菜單。請注意，該插件處理幕後競爭條件並智能處理亂序AJAX請求。 –

好的謝謝。我想在這種情況下，使用'open'和'close'事件只會在插件完成所有當前請求時更好地移除加載元素。你同意嗎？你能想出更好的方法來處理這個問題嗎？ – billynoah

CSS解

如果裝載元件是輸入控制則可以使用CSS一般兄弟選擇的同級：

.loading { 
    /* whatever */ 
} 
#autocomplete.ui-autocomplete-loading ~ .loading { 
    background-image: url(loading.gif); 
}

Working example

jQuery的解決方案

您可以添加search和response事件處理程序。

$("#autocomplete").autocomplete({ 
    delay: 500, 
    minLength: 3, 
    source: "/search.json", 
    search: function() { 
     $("#loading2").show(); 
    }, 
    response: function() { 
     $("#loading2").hide(); 
    } 
});

注意，因爲這種做法從比賽條件遭受（一）AJAX請求不一定完成在它們啓動的順序（II）可以自動完成射擊比搜索更少響應事件。

Combined demo here

來源

2013-12-06 12:35:55

如何在執行自動完成搜索時顯示加載圖標？

回答

相關問題