Twitter Typeahead Не отображать последний элемент

Question

Я новичок в Twitter Typeahead (используя typeahead.js 0.11.1), и я пытаюсь настроить его с помощью Thymeleaf + Spring MVC с помощью удаленного варианта. У меня есть эта проблема, когда не все результаты отображаются в раскрывающемся меню предложений. Последний элемент возвращаемых результатов не отображается.

Например, для целей тестирования я установил параметр minLength в значение «1». В моей базе данных у меня есть пользователи со следующими именами: Рон, Джон, Том. Поэтому, когда я ввожу букву «o» в поле ввода typeahead, я ожидаю, что все три из этих имен будут отображаться в меню предложений. Однако отображаются только 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 ответ = [ "Джон", "Рон", "Том"], а затем на ввод буквы «o» в поле ввода, только первые два результата отображаются в меню предложений, то есть Jon, Ron.

Если ответ содержит 4 результата, то есть ответ JSON = ["Jon", "Ron", "Tom", "Thomas"], то после ввода буквы 'o' в поле ввода только FIRST-результат появляется в меню предложений, то есть Jon.

Эта проблема возникает только при использовании дистанционной опции. Использование локальной опции отлично работает.

Answer 1

У меня была такая же проблема, но с помощью метода следа и ошибок и некоторой отладки я узнал, что если я сам установил лимит Бладхаунда, все будет хорошо.

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 он не работает