Typeahead.js And Bloodhound Showing An Odd Number Of Results

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: HTML: &

Solution 1:

Twitter supposedly abandoned the project. Try the maintained fork. It has the issue fixed.

Solution 2:

There is an issue on typeahead in the code:

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

You can change the code yourself in the JS as described on the issue page.

Solution 3:

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script><divid="typeahead"class="col-md-8"><inputclass="typeahead form-control"type="text"placeholder="Select the user"></div>

Solution 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
})

Solution 5:

For anyone who finds this, use the maintained version of the code. The original is crap.

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