新的 Typeahead with Bloodhound 如何处理错误？

Question

我遇到一个问题，当用户联合会话到期时，Typeahead 就停止工作了。我希望能够在对 Typeahead 的 "remote" 调用失败时执行操作。特别是 Typeahead 是如何处理的？是否有某种 "error" 回调，就像您在典型的 ajax 调用中会发现的那样？这是我目前拥有的代码：

var hints = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "/ProjectAssociation/CountryLookup?query=%QUERY",
        wildcard: "%QUERY"
    }
});
$("#assocStoragesSelection").typeahead(null, {
    name: "nations",
    limit: 90,
    valueKey: "ShortCode",
    displayKey: "Name",
    source: hints,
    templates: {
        empty: [
            "<div class='noitems'>",
            "No Items Found",
            "</div>"
        ].join("\n")
    }
});

Answer 1

试试这个代码

var hints = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "/ProjectAssociation/CountryLookup?query=%QUERY",
        wildcard: "%QUERY",
        ajax: {
         error: function(jqXHR) {
          //do some thing
         }
    }
    }
});

Answer 2

Typeahead's Bloodhound 建议引擎缺少在远程源出现问题时通知用户的工具。

您可以不使用 Bloodhound 来获取建议，而是使用 Typeahead 的 source 源选项（参见 here）。通过在此处指定您的来源，您可以处理错误并向用户显示合适的消息。

我在这里创建了一个示例：

http://jsfiddle.net/Fresh/oqL0g7jh/

答案的关键部分是如下所示的源选项代码：

$('.typeahead').typeahead(null, {
  name: 'movies',
  display: 'value',
  source: function(query, syncResults, asyncResults) {
    $.get(_url + query, function(movies) {

      var results = $.map(movies.results, function(movie) {
        return {
          value: movie.original_title
        }
      });

      asyncResults(results);
    }).fail(function() {
      $('#error').text('Error occurred during request!');
      setTimeout("$('#error').text('');", 4000);
    });
}

source 选项正在使用 jQuery 的 get 方法来检索数据。发生的任何错误都由延迟对象的 fail 方法处理。在该方法中，您可以适当地处理任何错误并向用户显示合适的消息。由于源函数指定了三个参数，这导致 Typeahead 将此调用默认为异步调用，因此调用：

asyncResults(results);

Answer 3

"right" 处理错误的方法是使用 prepare 函数向 AJAX 调用添加错误处理程序。如果您使用 wildcard 选项，请注意 prepare 会覆盖它。

例如，你可以这样转：

new Bloodhound({
    remote: {
        url: REMOTE_URL,
        wildcard: '%s'
    }
});

进入这个：

new Bloodhound({
    remote: {
        url: REMOTE_URL,
        prepare: function(query, settings) {
            return $.extend(settings, {
                url: settings.url.replace('%s', encodeURIComponent(query)),
                error: function(jqxhr, textStatus, errorThrown) {
                    // show error message
                },
                success: function(data, textStatus, jqxhr) {
                    // hide error message
                }
            });
        }
    }
});

prepare返回的对象作为jQuery.ajax()的设置对象，可以参考its documentation。

新的 Typeahead with Bloodhound 如何处理错误？

How is error handling done with the new Typeahead with Bloodhound?

javascript

jquery

typeahead.js

typeahead

bloodhound