javascript - TypeAhead.js 和 Bloodhound 显示奇数​​个结果

Question

我的前端有一个 TypeAhead/Bloodhound 实现，它从 Play/Scala 服务器获取 JSON 数据。 Typeahead 版本是 0.11.1。实现如下:

HTML:

<div id="typeahead" class="col-md-8">
   <input class="typeahead form-control"  type="text" placeholder="Select the user">
</div>

JavaScript:

var engine = new Bloodhound({
  datumTokenizer: function (datum) {
    var fullName = fullName(datum);
    return Bloodhound.tokenizers.whitespace(fullName);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) { return obj.id; },
  remote: {
    url: routes.controllers.Users.index("").url,
    cache: false,
    replace: function (url, query) {
        if (!isEmpty(query)) {
            url += encodeURIComponent(query);
        }
        return url;
    },
    filter: function (data) {
        console.log(data);
        return $.map(data, function (user) {
            return {
                id: user.id,
                fullName: viewModel.fullName(user)
            };
        });
    }
}
});

// instantiate the typeahead UI
$('#typeahead .typeahead')
.typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
},
{
    name: 'engine',
    displayKey: 'fullName',
    source: engine
})

function fullName(data) {
  if (data === undefined) return "";
  else {
    var fName = data.firstName === undefined ? "" : data.firstName;
    var lName = data.lastName === undefined ? "" : data.lastName;
    return fName + ' ' + lName;
  }
};

服务器给出的 JSON 响应:

[{"firstName":"Test","lastName":"User", "id":1}, ... ]

服务器对结果进行分页，以便最多提供 5 个结果，这也应该是 Typeahead/Bloodhound 的默认限制。

问题是，当服务器返回 5 个结果时，Typeahead 在叠加层中显示 0 个结果。如果服务器给出 4 个结果，则 TypeAhead 在叠加层中显示 1 个。如果服务器给出 3 个结果，则 TypeAhead 显示 2 个结果。对于 2 和 1 结果，它显示叠加层中正确的元素数量。如果我删除页面长度并且服务器返回超过 10 个结果，则 TypeAhead 显示 5 个结果(限制)。过滤器内的 console.log 显示了正确数量的数据结果，因此它们至少会转到 Bloodhound。

这段代码可能有什么问题？此 TypeAhead 字段是此页面中唯一存在的 TypeAhead 字段。我检查了 DOM，TypeAhead 生成了错误数量的结果集字段，所以这不是 CSS 的问题(也试图删除所有自定义 CSS)。

感谢任何回复:)

Answer 1

推特据称 abandoned该项目。尝试 the maintained fork .它已解决问题。