jQuery-Autovervollständigung: So zeigen Sie ein animiertes GIF-Ladebild an

Lesezeit: 2 Minuten

Daniel Penalba

Ich verwende die jQuery Automatische Vervollständigung Plugin kombiniert mit Ajax. Wissen Sie, wie ich eine Fortschrittsanzeige anzeigen kann, während die Ajax-Suche durchgeführt wird?

Das ist mein aktueller Code.

<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="https://stackoverflow.com/questions/4489607/img/indicator.gif")"/></span>
</div>

Die FindUsers-URL gibt eine Benutzerliste im Inhalt zurück.

Können Sie Ihren tatsächlichen Markup/Code zeigen, der an den Browser gesendet wird, dh ohne diese Ruby/ASP/was auch immer <% %> Markup?

– Marcel Korpel

20. Dezember 2010 um 12:30 Uhr
@Marcel: Ich habe den Beitrag bearbeitet

– Daniel Penalba

20. Dezember 2010 um 12:47 Uhr
Es gibt noch eine %> drin; aus Versehen, oder macht das Probleme?

– Marcel Korpel

20. Dezember 2010 um 13:09 Uhr

Autovervollständigung fügt die bereits hinzu ui-autocomplete-loading Klasse (für die Dauer des Ladevorgangs), die dafür verwendet werden kann …

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

Wenn Sie ThemeRoller verwenden, werden die Informationen zum Laden von GIFs aus dem Download entfernt. bugs.jqueryui.com/ticket/6046

– camainc

17. Mai 2011 um 16:59 Uhr
Ich denke, dass dies eine bessere Lösung als die akzeptierte Antwort ist, da sie berücksichtigt, wenn von der Suche keine Ergebnisse zurückgegeben werden.

– space_balls

16. Februar 2012 um 3:59 Uhr
und da das Bild nicht im Themeroller-Download enthalten ist, holen Sie es sich hier: ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/…

– Gemeiner Hecht

29. Juni 2012 um 14:11 Uhr
FWIW die Animation funktioniert nicht mit einer lokalen (großen) Array-basierten Quelle (geladen asynchron) für die automatische Vervollständigung. Vermutlich, weil nichts anderes etwas tun kann, während die Suche stattfindet. Zum Beispiel: jsbin.com/EmikobU/1/edit

– Chris Kimpton

5. September 2013 um 12:08 Uhr
@ChrisKimpton: In jsbin, dass Sie die Animation beim Suchen eingefügt haben, sehe ich kein Problem (mit dem neuesten FF).

– Wookie88

28. Januar 2014 um 13:48 Uhr

Dalen

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

wobei die Arbeit der CSS-Klasse wie folgt definiert ist:

.working{background:url("https://stackoverflow.com/questions/4489607/img/indicator.gif") no-repeat right center;}

BEARBEITEN

Sams Antwort ist ein besserer Ansatz, um das Problem anzugehen

Die Verwendung der ui-autocomplete-loading-Klasse ist vorzuziehen, da dieser Indikator den Benutzer verwirrt, wenn keine Ergebnisse zurückgegeben werden

– Nick Barrett

15. Juni 2012 um 3:21 Uhr
Antwort: function(){} – Wird ausgelöst, nachdem eine Suche abgeschlossen ist

– pszaba

16. Mai 2016 um 14:09 Uhr

Wenn keine Ergebnisse nicht funktionieren, können Sie Folgendes tun:

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

12864400cookie-checkjQuery-Autovervollständigung: So zeigen Sie ein animiertes GIF-Ladebild an

#Abfrage #Autovervollständigung #jquery-autocomplete #jquery-plugins #jquery-ui