Twitter Typeahead不显示最后一个元素

Question

我是Twitter Typeahead的新手（使用typeahead.js 0.11.1），我尝试使用远程选项使用Thymeleaf + Spring MVC进行配置。我有这个问题，并不是所有的结果都显示在建议下拉菜单中。返回结果的最后一个元素没有显示。

例如，出于测试目的，我已将minLength选项设置为＆＃39; 1＆＃39;。在我的数据库中，我有以下名字的用户;罗恩，乔恩，汤姆。所以，当我输入“＆＃39; o＆＃39;在预先输入字段中，我希望所有这三个名称都显示在建议菜单中。但是，仅显示2个名称。我已经检查了响应参数（使用Firebug）并且可以确认返回了所有三个名称。但是只显示了2个结果，即最后一个元素没有显示。

以下是javascript代码：

// constructs the suggestion engine
var firstNames = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/hub/get_user_firstname_suggestions.json?searchTerm=%QUERY',
        wildcard: '%QUERY'
    }
});

//Initialize the Bloodhound suggestion engine
firstNames.initialize(); 

$('#firstName').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
{
    name: 'firstNames',
    source: firstNames.ttAdapter()
});

以下是结果的屏幕截图：

输入Html代码：

<input th:id="${heading.fieldName}" class="typeahead" type="text" th:placeholder="${heading.value}" />

CSS文件：

.typeahead,
.tt-query,
.tt-hint {
    font-weight: normal;
  width: 100%;
  /*height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;*/
  border: 1px solid #B0B0B0;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  outline: none;
}

.typeahead {
  background-color: #fff;
  padding: 0px 2px;
}

.typeahead:focus {
  border: 1px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
    font-weight: normal;
  width: 100%;
  margin: 2px 0;
  padding: 2px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 3px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

我错过了什么吗？

非常感谢任何帮助。

更新 -

好的，现在我有以下奇怪的行为：

如果回复包含3个结果，即JSON回复= [＆＃34; Jon＆＃34;，＆＃34; Ron＆＃34;，＆＃34; Tom＆＃34;]则在输入字母时＃39; O＆amp;＃39;在输入字段中，只有前两个结果出现在建议菜单中，即Jon，Ron。

如果回复包含4个结果，即JSON回复= [＆＃34; Jon＆＃34;，＆＃34; Ron＆＃34;，＆＃34; Tom＆＃34;，＆＃34; Thomas＆＃34;]然后输入字母＆＃39; o＆＃39;在输入字段中，只有FIRST结果出现在建议菜单中，即Jon。

仅在使用远程选项时才会出现此问题。使用local选项可以正常工作。

Answer 1

我有同样的问题，但是使用跟踪和错误的方法以及一些调试我发现如果我自己设置Bloodhound的限制它可以正常工作。

var provider = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, limit:10, remote: { url : '...', wildcard : '%QUERY', } });

还值得一提的是，这是针对typeahead.js 0.10.5，当我用typeahead.js 0.11.1进行测试时，它无法正常工作