3

我的寻血猎犬对象被两个预输入重复使用，每个预输入旁边都有一个隐藏图像，即这两个图像：#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 的网站中，他们建议使用beforeSendand 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
4

3 回答 3

3

好吧，我通过以下假设解决了我们的问题（尽管我对此不是 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
});

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

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

于 2014-07-03T06:28:08.910 回答
1

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;
于 2015-10-21T18:25:39.120 回答
0

你当然可以使用 . 最接近或.next的 JQuery 函数来定位所需的元素。

于 2014-06-23T09:53:08.653 回答