4

我尝试在 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;
};

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

4

2 回答 2

2

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

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

$(selector).typeahead({
  name : 'berths',
  prefetch : {
    url : jsonUrl,
    filter : myfilter
  }
});
于 2013-07-12T00:03:58.970 回答
1

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

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

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

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

于 2013-07-11T03:28:42.890 回答