オートコンプリート検索の実行時に読み込みアイコンを表示する方法は？

Question

これを個別のdivに表示する必要があります（.ui-autocomplete-loadingはここには該当しません）。私はsearchイベントが起こったときにそれを示すことができます。しかし、それを隠すべきときをどうすれば理解できますか？

Answer 1

私はあなたがリモートデータソースを使用していると仮定しています。その場合は、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/

Answer 2

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(); 
    } 
}); 

ノートは、（i）AJAX要求は必ずしも（ⅱ）オートコンプリートが検索よりも少ない応答イベントを発生ことがあり、彼らが開始されたために終了しません。

Combined demo here