Not able to make Twitter typeahead 0.10 with bloodhound with prefetch to work

Question

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>

Answer 1

I am pretty sure that , weirdly enough it has todo with the html divs and class delcaration, if i use the following code , which simply adds a div wrapper around your input, then it seems to work fine ( using jquery 1.9.1, typeahead latest bundle)

html

    <div class="films">
 <input class="typeahead" name="film" type="text" autocomplete="off" value="">   

    </div>

js code (only part i left off was handlebars)

 var films = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
  prefetch: "js/films.json"


  });

  films.initialize();

  $('.films .typeahead').typeahead(null, {

    displayKey: 'value',
    source: films.ttAdapter()

  })


});

here is a jsfiddle using the same data as a local store http://jsfiddle.net/qLk8c/