TypeAhead.js and Bloodhound showing an odd number of results
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 = "<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>Twitter supposedly abandoned the project. Try the maintained fork. It has the issue fixed.
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
})
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.