TypeAhead.js and Bloodhound showing an odd number of results

Question

I have a TypeAhead/Bloodhound implementation in my frontend, that fetches JSON-data from a Play/Scala-server. Typeahead-version is 0.11.1. The implementation is as follows:<

Answer 1

Try initializing engine with engine.initialize() ; returning suggestion object at filter , which should be available at templates -> suggestion ; initializing engine at source with source:engine.ttAdapter(); returning element as String at suggestion , to populate "suggestion" drop down menu . See Typeahead - examples - Custom Templates

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 = "
" 
                        + data.suggestion.firstName 
                        + " " 
                        + data.suggestion.lastName + "
";
        return _suggestion
      }
    },
    source: engine.ttAdapter()
  });