I am struggling to showcase a collection of items using typeahead with a JSON file as the data source. Unfortunately, none of my information is appearing on the screen.
My objective is to list the names and utilize the other attributes for different purposes once selected.
../data/test.json
[
{"name": "John Snow", "id": 1},
{"name": "Joe Biden", "id": 2},
{"name": "Bob Marley", "id": 3},
{"name": "Anne Hathaway", "id": 4},
{"name": "Jacob deGrom", "id": 5}
]
test.js
$(document).ready(function() {
var names = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace("name"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: '../data/test.json'
}
});
names.initialize();
$('#test .typeahead').typeahead({
name: 'names',
displayKey: 'name',
source: names.ttAdapter()
});
)};
test.html
<div id="test">
<input class="typeahead" type="text">
</div>
** If someone could provide me with an explanation of what the datumTokenizer and queryTokenizer are, that would be greatly appreciated **