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/

更新，每条评论如下：

要在 a 中显示加载图像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

这最初对我不起作用。为了让我的工作，我必须做的更改是覆盖 _renderItemData 类而不是 _renderItem 类，并返回 $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 回答