twitter typeahead +探犬重用:如何显示ajax请求的加载gif？

Question

我的探犬对象被两个typeahead重用，每个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;
            }
        }
    });

Typeahead #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，但是“从那里”我怎么知道哪个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

好吧，我解决了我们的问题(尽管我对此并不是百分之百满意！)假设：焦点元素应该始终是typeahead附加的文本域。

这是代码(猎犬对象初始化)：

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 )，但是想法应该是相同的。

现在，我将在我的项目中使用它。我希望这也能为你工作。

Answer 2

https://github.com/twitter/typeahead.js

  var data = new Bloodhound({
        datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: "api/lookup/posearch/%QUERY",//,
            prepare: function (query, settings) {
                $("#loadingType").addClass('fa fa-circle-o-notch fa-spin');
                settings.url = "api/lookup/posearch/" + query;
                return settings;
            },               

            filter: function (m) {
                $("#loadingType").removeClass('fa fa-circle-o-notch fa-spin');

                // Map the remote source JSON array to a JavaScript object array
                return $.map(m, function (d) {

                    return {
                        value: d
                    };
                });
            }
        }
    });

    // Initialize the Bloodhound suggestion engine
    data.initialize();
    return data;

Answer 3

当然，您可以使用.closest或.next JQuery函数来定位所需的元素。