使用新的Bloodhound Typeahead如何处理错误？

Question

当用户联合会话过期时，Typeahead停止工作，我希望能在“远程”调用Typeahead失败时执行某个操作。特别是对于Typeahead，如何处理这种情况？是否有类似于典型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")
    }
});

- TheDude

---

在这种情况下，您需要在从服务器返回的数据中添加一个检查。 - itzmukeshy7

我的回答有帮助吗？ - Ben Smith

Answer 1

处理错误的“正确”方法是在 AJAX 调用中添加一个错误处理程序，使用 prepare 函数。如果您正在使用 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
                }
            });
        }
    }
});

< p > prepare返回的对象可用作jQuery.ajax()的设置对象，因此您可以参考其文档。 < / p >

- Tobia

Answer 2

Typeahead的Bloodhound建议引擎在通知用户远程源存在问题方面缺乏设施。您可以使用Typeahead的源选项（见此处）而不是使用Bloodhound获取建议。通过在此处指定源，您可以处理错误并向用户显示适当的消息。我已经在这里创建了一个示例：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);
    });
}

源选项利用jQuery的get方法检索数据。任何出现的错误都将通过deferred对象的fail方法处理。在该方法中，您可以适当地处理任何错误并向用户显示合适的消息。由于源函数指定了三个参数，因此这会导致Typeahead将此调用默认为异步调用，因此需要调用:

asyncResults(results);

- Ben Smith

Answer 3

试试这段代码

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
         }
    }
    }
});

- Mehdi

---

@BenSmith的回答很优雅，但如果这个有效，我相信它是最简洁的。 - Redmega

@AngelJosephPiscola 这个答案在最新版本的Bloodhound中不起作用。'remote'选项没有'ajax'选项。请参见这里。 - Ben Smith

这在10.5中运行得很好...在搜索了几个小时并且看了一堆其他只处理空结果集而不是像这个处理远程URL返回的实际错误（401等）的答案之后，我找到了这个。 - byron