Question

我的前端有一个TypeAhead / Bloodhound实现，它从Play / Scala服务器获取JSON数据。 Typeahead-version是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-field是此页面中唯一的TypeAhead-field。我检查了DOM，并且TypeAhead生成了错误数量的结果集字段，所以它不是CSS的问题（试图删除所有自定义CSS）。

感谢您的回复：）

Answer 1

推特推测abandoned项目。试试the maintained fork。它解决了这个问题。

Answer 2

代码中的typeahead存在问题：

https://github.com/twitter/typeahead.js/issues/1218

您可以按问题页面上的说明在JS中自行更改代码。

Answer 3

尝试使用engine初始化engine.initialize();在[{1}}处返回suggestion对象，该对象应在filter - ＆gt;处提供templates;使用suggestion在engine初始化source;将元素作为source:engine.ttAdapter()返回String，以填充＆＃34;建议＆＃34;下拉式菜单。见Typeahead - examples - Custom Templates

＆＃13;

suggestion

＆＃13;

var data = [{
  "firstName": "Test",
  "lastName": "User",
  "id": 1
}, {
  "firstName": "Test2",
  "lastName": "User2",
  "id": 2
}, {
  "firstName": "Test3",
  "lastName": "User3",
  "id": 3
}, {
  "firstName": "Test4",
  "lastName": "User4",
  "id": 4
}, {
  "firstName": "Test5",
  "lastName": "User5",
  "id": 5
}];

var engine = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: $.map(data, function(val, key) {
            // return `suggestion` object for `templates` `suggestion`         
            return {value:val.firstName, suggestion:val}
         })
});
// initialize `engine`
engine.initialize();

// instantiate the typeahead UI
$("#typeahead .typeahead")
  .typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
  }, {
    name: "engine",
    displayKey: "firstName",
    templates: {
      suggestion: function (data) {
        // `suggestion` object passed at `engine`
        console.log(data.suggestion);
        // return suggestion element to display
        var _suggestion = "<div>" 
                        + data.suggestion.firstName 
                        + " " 
                        + data.suggestion.lastName + "</div>";
        return _suggestion
      }
    },
    source: engine.ttAdapter()
  });

＆＃13;

Answer 4

If (ike me) you don't want to go into the typeahead source, (for instance because you want to use the min version) you can also set limit very high. You will then have to limit the number of items to put into the list yourself.

$('#typeahead .typeahead')
.typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
},
{
    name: 'engine',
    displayKey: 'fullName',
    source: engine,
    limit: 1000
})

Answer 5

对于发现此问题的任何人，请使用代码的维护版本。原来是胡扯。

https://github.com/corejavascript/typeahead.js

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

5 个答案: