web-dev-qa-db-ja.com

jQueryオートコンプリート：アニメーションGIFの読み込み画像を表示する方法

JQuery AutoComplete プラグインとajaxを組み合わせて使用​​しています。 Ajax検索の実行中に進行状況インジケーターを表示する方法を知っていますか？

これが私の現在のコードです。

<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は、コンテンツ内のユーザーリストを返します。

jqueryjquery-uijquery-pluginsautocompletejquery-autocomplete
55
Daniel Peñalba

オートコンプリートは、このために使用できるui-autocomplete-loadingクラスを（ロード中に）追加します...

.ui-autocomplete-loading { background:url('img/indicator.gif') no-repeat right center }
155
Sam Wilson
$("#autocomplete-textbox").autocomplete
(
search  : function(){$(this).addClass('working');},
open    : function(){$(this).removeClass('working');}
)

cSSクラスの動作は次のように定義されます。

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

[〜＃〜] edit [〜＃〜]

サムの answer は、問題に対処するためのより良いアプローチです

47
Dalen

結果が機能しない場合、これを行うことができます：

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