twitter typeahead 显示所有可用值，而不仅仅是匹配值答案

【问题标题】：twitter typeahead shows all available values instead of just matching valuestwitter typeahead 显示所有可用值，而不仅仅是匹配值
【发布时间】：2013-06-28 09:09:48
【问题描述】：

我尝试在 Web 应用程序中应用 twitters typeahead 插件。我使用 typeahead 插件初始化了一些 typeahead 输入字段，这似乎可以工作。该插件被赋予了生命。然而，Id 似乎与我正在编写的查询字符串与它选择显示的值不匹配。例如，如果我选择写“Nuu”，那么它也会显示前 3 个字母完全不同的值。

我的 html 看起来像这样：

我的 JavaScript 看起来像这样：

$(selector).each(function(){
  var jsonUrl = $(this).attr('data-json');
    $(this).typeahead({
      name : 'berths',
      remote : {
      url : jsonUrl,
      filter : myfilter
    }
  });
});


myfilter = function(parsedResponse) {
  var datums = $.map(parsedResponse, function(berth) {
    var datum = {
      name : berth.name,
      value : berth.name + (berth.alias ? " (" + berth.alias + ")" : ""),
      tokens : [ berth.name, berth.alias ],
      latitude : berth.latitude,
      longitude : berth.longitude
    };

    return datum;
  });

  return datums;
};

我做错了什么的任何线索？

【问题讨论】：

标签： typeahead.js

【解决方案1】：

虽然 typeahead.js 将为给定查询过滤本地和预取数据，但它不会过滤远程数据。 typeahead.js 的运行假设是，对于远程数据，过滤是在服务器端完成的。

对于您的用例来说，使用预取似乎是一个更好的选择：

$(selector).typeahead({
  name : 'berths',
  prefetch : {
    url : jsonUrl,
    filter : myfilter
  }
});

【讨论】：

谢谢。我之前曾尝试使用预取，但由于另一个错误而从未执行过。这让我有点困惑。然而，我现在使用预取和远程的组合来工作，这符合我的需要。

【解决方案2】：

您是否缺少jsonUrl 上的查询数据？ TypeAhead 需要 URL 中的替换字符串来替换字段中键入的数据，因此 URL 应如下所示：

/my/data/source/?text=%QUERY

%QUERY 被替换为输入字段内容。

注意%QUERY是默认的；你应该可以使用任何你想要的字符串，但我还不能让它工作。

【讨论】：