TypeAhead.js и Bloodhound показывают нечетное количество результатов

У меня есть реализация TypeAhead/Bloodhound в моем интерфейсе, который извлекает JSON-данные из Play/ Scala -сервера. 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-response сервер дает:

[{"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).

Спасибо за любые ответы:)

Ответы

Ответ 1

В коде есть проблема с typeahead:

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

Вы можете изменить код самостоятельно в JS, как описано на странице проблемы.

Ответ 3

Попробуйте инициализировать engine с помощью engine.initialize(); возвращая объект suggestion в filter, который должен быть доступен в templates → suggestion; инициализация engine при source с помощью source:engine.ttAdapter(); возвращающий элемент как String в suggestion, чтобы заполнить раскрывающееся меню "предложение". См. Typeahead - примеры - пользовательские шаблоны

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()
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div id="typeahead" class="col-md-8">
  <input class="typeahead form-control" type="text" placeholder="Select the user">
</div>

Ответ 4

Если (ike me) вы не хотите входить в источник typeahead (например, потому что вы хотите использовать версию min), вы также можете установить ограничение очень высоко. Затем вам нужно будет ограничить количество элементов, которые нужно поместить в список.

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