Unable to make Twitter type 0.10 with a pre-loading sniffer

Question

I have already made several attempts to get typeahead.js 0.10 to work and I can only make it work with a local dataset.

When using a prefetch or a remote option, even after the sample page, it does not work. Either I format the json file with the wrong syntax and / or messed up the snoop options.

Honestly, what does "datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace (d.value);}," really mean? what does that mean a space ...

Well, I leave here my current example with the expectation that someone can help me figure out how to use this.

Can you, if possible, add an example with Bloodhound using the filter option along with the used json file example.

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 sure that, oddly enough, it deals with html-divs and delcaration classes, if I use the following code that just adds a wrapper div around your input then it works fine (using jquery 1.9. 1, the newest typeahead package)

HTML

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

    </div>

js code (only the part I stopped was a handle)

 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 jsfiddle using the same data as local storage http://jsfiddle.net/qLk8c/