I've already made several attempts to make the typeahead.js 0.10 to work and only can make it work with the local dataset.
When using prefetch or remote option, even following the examples page, it doesn't work. Either I am formatting the json file with the wrong syntax and/or messing up with the bloodhound options.
Honestly, what does the "datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }," actually do? what does it mean the whitespace...
Well, I leave here my current example with expectations that somebody can help me understand how to use this.
Can you please, if possible, add an example with Bloodhound using the filter option, along with the json file example being used.
JSON file
[
{
"year": "1961",
"value": "Test Side Story",
"tokens": [
"West",
"Side",
"Story"
]
},
{
"year": "1962",
"value": "Tawrence of Arabia",
"tokens": [
"Lawrence",
"of",
"Arabia"
]
},
{
"year": "1963",
"value": "Tom Jones",
"tokens": [
"Tom",
"Jones"
]
},
{
"year": "2012",
"value": "Argo",
"tokens": [
"Argo"
]
}
]
Typeahead 0.10 script
<script>
var films = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'http://localhost/dh/js/films.json'
});
films.initialize();
$('#cenas0').typeahead(null, {
displayKey: 'value',
source: films.ttAdapter(),
templates: {
suggestion: Handlebars.compile(
'<p><strong>{{value}}</strong> – {{year}}</p>'
)
}
});
</script>
HTML code (with some script declarations)
<script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>
<input id="cenas0" class="typeahead" placeholder="cenas0"></input>