web-dev-qa-db-ja.com

jQuery-uiオートコンプリートでスピナーを表示する

私はあちこちを検索してきましたが、誰もそれをしているのを見ていません-jQuery UIオートコンプリートを備えたある種のスピナー/ローダーを持つことは可能ですか？ （1.8）データがフェッチされている間？

cssjquery-uijquery-ui-autocomplete
21
Ciel

オートコンプリートを使用してフィールドの横にスピナー画像を配置し、最初は非表示にできるはずです。次に、コールバック関数を使用して非表示/表示します。

次に、検索オプションを使用してスピナーを表示し、開いて非表示にします。

v1.8以下

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   open: function(event, ui) {
       $('.spinner').hide();
   }
});

v1.9以降

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   response: function(event, ui) {
       $('.spinner').hide();
   }
});
39
woolyninja

私の解決策は、ajaxGETリクエストの処理中に入力要素で追加および削除される.ui-autocomplete-loadingCSSクラスを使用することでした。

input[type='text'].ui-autocomplete-loading {
    background: url('/icons/loading.gif') no-repeat right center;
}

確かに、入力要素の外側にスピナーを表示することはできないため、あまり柔軟なソリューションではありませんが、私の場合は、まさに私が探していたUXです。

46
stefann

CSSソリューション

ロード要素が入力コントロールの兄弟である場合、CSSの一般的な兄弟コンビネータ（〜）を使用できます。

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

実例
代替（jQuery）ソリューション

5
Salman A