Question

我尝试在网络应用程序中应用twitters 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;
};

我做错了什么线索？

Answer 1

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

对于您的用例，似乎使用预取可能是更好的选择：

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

Answer 2

您是否遗漏了jsonUrl上的查询数据？ TypeAhead要求URL中的替换字符串替换为字段中键入的数据，因此URL应如下所示：

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

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

请注意%QUERY是默认值;你应该能够使用你想要的任何字符串，但我还没有能够使用它。

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

2 个答案: