jQuery自動完成：如何顯示動畫GIF加載圖像

我正在使用jQuery AutoComplete插件與ajax結合使用。你知道如何在ajax搜索時顯示進度指示器嗎？jQuery自動完成：如何顯示動畫GIF加載圖像

這是我現在的代碼。

<script type="text/javascript"> 
    $("#autocomplete-textbox").autocomplete('http://www.example.com/AutoComplete/FindUsers'); 
</script> 

<div> 
    <input type="text" id="autocomplete-textbox" /> 
    <span class="autocomplete-animation"><img id="ajaxanimation" src="../img/indicator.gif")"/></span> 
</div>

FindUsers URL在內容中返回用戶列表。

來源

2010-12-20 Daniel Peñalba

你也可以說會被髮送給瀏覽器，即實際的標記/代碼，沒有那些紅寶石/ ASP /什麼' <% %>'標記？ – 2010-12-20 12:30:42

@Marcel：我編輯了這個帖子 – 2010-12-20 12:47:59

裏面還有'％>';意外，還是這是造成問題？ – 2010-12-20 13:09:03

148

自動完成已經添加ui-autocomplete-loading類（在加載期間）可用於此...

.ui-autocomplete-loading { background:url('img/indicator.gif') no-repeat right center }

來源

2011-02-22 01:06:43

當您使用ThemeRoller時，加載gif相關信息被剝離下載。 http://bugs.jqueryui.com/ticket/6046 – camainc 2011-05-17 16:59:40

我認爲這是一個比接受的答案更好的解決方案，因爲它解釋了何時沒有搜索結果返回。 – 2012-02-16 03:59:49

並且由於該圖像不在themeroller下載中，請從此處獲取：http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif – commonpike 2012-06-29 14:11:34

$("#autocomplete-textbox").autocomplete 
(
search : function(){$(this).addClass('working');}, 
open : function(){$(this).removeClass('working');} 
)

其中CSS類的工作定義如下：

.working{background:url('../img/indicator.gif') no-repeat right center;}

編輯

山姆answer是解決問題的一個更好的辦法

來源

2010-12-20 13:28:28 Dalen

使用ui自動完成加載類是更可取的，因爲當沒有結果返回時，此指標仍然會讓用戶感到困惑 – 2012-06-15 03:21:08

響應：function（）{} - 在搜索完成後觸發 – pszaba 2016-05-16 14:09:07

如果沒有結果沒有工作，你可以這樣做：

$("input[name='search']").autocomplete({ 
..., 
select: function(event, ui) { 
action show image 
} 
}).data("autocomplete")._renderItem = function(ul, item) { 
action hide image 
}

來源

2011-09-08 16:05:54 David

jQuery自動完成：如何顯示動畫GIF加載圖像

回答

相關問題