loading - twitter typeahead + bloodhound 再利用 : how do I show a loading gif for the ajax request?

Question

我的 bloodhound 对象被两个 typeaheads 重用，每个 typeahead 旁边都有一个隐藏的图像，就是这两个图像:#loading-1 和 #loading-2,

    galleriesBloodhound = new Bloodhound({
        datumTokenizer: function (gallery) { return gallery.name; },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/GalleriesAjax/List?nameQuery=%QUERY',
            beforeSend: function (xhr) {

            },
            filter: function (response) {
                return response.pageOfGalleries;
            }
        }
    });

提前输入 #1:

    $("#gallery-name").typeahead({
        highlight: false,
        hint: true,
    },
    {
        name: 'galleries',
        displayKey: function (gallery) { return gallery.displayName; },
        source: galleriesBloodhound.ttAdapter()
    }).on(..).on(..)...

Typeahead #2(相同的代码)

    $("#gallery2-name").typeahead({
        highlight: false,
        hint: true,
    },
    {
        name: 'galleries',
        displayKey: function (gallery) { return gallery.displayName; },
        source: galleriesBloodhound.ttAdapter()
    }).on(..).on(..)...

如何在 ajax 请求尚未返回时显示正确的 #loading-1 和 #loading-2？

在 typeahead.js 的网站上，他们建议使用 beforeSend 和 filter，但是“从那里”我怎么知道调用 bloodhound 的是哪个 typeahead？

    beforeSend: function (xhr) {
         $("#loading-i").show();     // How do I figure "i" ??
    },
    filter: function (response) {
        $("#loading-i").hide();     // How do I figure "i" ??
        return response.pageOfGalleries;
    }

    // i depends on the typeahead that is using "this" bloodhound

Answer 1

好吧，我解决了我们的问题(虽然我对此不是 100% 满意!)基于以下假设:焦点元素应该始终是预先输入的附加文本字段.

这是代码(Bloodhound 对象初始化):

var locsData = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: "/locations/search.json?q=%QUERY",
    ajax: {
      beforeSend: function(xhr, settings) {
        // maybe the 'if' is not necessary, but just to be sure...
        if ($(document.activeElement).typeahead != null) {
          $(document.activeElement).addClass('loading-text');
        }
      },
      complete: function(xhr, status) {
        if ($(document.activeElement).typeahead != null) {
          $(document.activeElement).removeClass('loading-text');
        }
      }
    }
  },
  limit: 100
});

在您的情况下，您正在切换某个元素的显示(<span> ？)，在我的项目中，我正在向该元素添加/删除一个类(此类在右边缘显示一个 loading.gif文本字段)，但想法应该是相同的。

现在我将在我的项目中使用它。我希望这对你也有用。