2

検索中にオートコンプリートドロップダウンに読み込みアイコンを表示できるようにしたいと思います。どうすればこれを行うことができますか？

現在のコード：

$("#searchbox").autocomplete({
  search: function(event, ui) {
    $('ul.ui-autocomplete').append("<li id='loading_icon'></li>");
    $('ul.ui-autocomplete').show();
  },
  open: function(event, ui) {
    $('#loading_icon').hide();
  }
 ...

しかし、何が起こるかというと、ブラウザページの左上にアイコンが表示されます。場所の計算はまだ行われていません。オートコンプリートドロップダウンボックスの場所を計算するために、どういうわけか電話をかけることができますか？

ありがとう！

4

3 に答える 3

2

これは実行可能ですが、sourceオプションを関数に変換し、AJAXリクエストを自分で作成する必要があります。例えば：

$("#selector").autocomplete({
    source: function (request, response) {
        /* Show the loading indicator while a search is in progress */
        response([{ label: "Loading...", loading: true }]);
        $.ajax({
            url: "your_url_here",
            data: request,
            type: "GET",
            dataType: "json"
        }).success(response);
    },
}).data("autocomplete")._renderItem = function (ul, item) {
    var $li = $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);

    /* Make sure nothing happens when you click "Loading" */
    if (item.loading) {
        $li.find("a").on("click", false);
    }
};

オーバーライドする最後のビット_renderItemは、読み込み中のアイテムのクリックイベントをキャンセルできるようにするためです（そして、アイテムがに配置されないようにしますinput）。

例： http： //jsfiddle.net/m3MGH/

以下のコメントごとに更新：

で読み込み中の画像を表示するには、次のdivようにします（_renderItem関数を変更するだけです）。

.data("autocomplete")._renderItem = function(ul, item) {
    var $li = $("<li></li>");

    if (item.loading) {
        $li.append("<div>Loading<img src='my_loading_img' /></div>").appendTo(ul);                
    } else {
        $li.data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
    }

    return $li;
};

物事を適切に配置するには、おそらく小さなCSSを使用する必要がありますが、これで開始できます。

于 2012-08-14T22:43:21.777 に答える
0

これは最初はうまくいきませんでした。動作させるために必要な変更は、_renderItemクラスではなく_renderItemDataクラスをオーバーライドし、$liオブジェクトを返すことでした。

element.autocomplete({
               ...
     }).data("autocomplete")._renderItemData = function (ul, item) {
          var $li = $("<li></li>")
          .data("item.autocomplete", item)
          .append("<a>" + item.label + "</a>")
          .appendTo(ul);

                        /* Make sure nothing happens when you click "Loading" */
          if (item.loading) {
              $li.find("a").on("click", false);
          }
          return $li;
      };
于 2013-01-02T16:32:29.073 に答える
0

おもう

if (item.loading) {
    $li.find("a").on("click", false);
}

jQuery オートコンプリートは、Tab および Enter ボタンを押すと、マウス クリックと同じように反応するため、これだけでは不十分です。また、オートコンプリートは上下ボタンに反応します。

誰かがこの動作を修正する解決策を提案できますか?

于 2013-08-20T13:32:59.820 に答える