Using typeahead with "remote" option doesn't filter out drop down results

[swapnilmishra]

Below is the code to init typeahead

var moviesTypeahead = $('#moviesTypeahead').typeahead({
    name: 'movies',
    remote:'movies.json',
    template: template,
    engine: Handlebars
});

this is my movies.json datasource

[
    {
        "adult": false,
        "backdrop_path": "mBLimfLfAcAhKTSf6d2lU8fNNuJ.jpg",
        "id": 13387,
        "name": "@Transporter3",
        "value": "Transporter 3",
        "release_date": "2008-12-05",
        "poster_path": "/eEQ4JieKyLBRRSRnRGuPlxp7qiS.jpg",
        "popularity": 2.4774809734915,
        "title": "Transporter 3",
        "vote_average": 7.6,
        "vote_count": 20
    },
    {
        "adult": false,
        "backdrop_path": null,
        "id": 94261,
        "name": "@TheAmazingTransplant",
        "value": "The Amazing Transplant",
        "release_date": "1970-01-01",
        "poster_path": "/xJ8mOfMyvg6aVLRSpdSO1sL3Lcj.jpg",
        "popularity": 0.2,
        "title": "The Amazing Transplant",
        "vote_average": 0,
        "vote_count": 0
    }
]

Now suppose i start typing out "ama" it doesn't filter out the other result item namely "@TRANSPORTER3". But if i change datasource type to prefetch instead of remote filtering works. Just wondering why its not filtering out results in case of remote.

Below are screenshots for same.

Prefetch

Remote

[swapnilmishra]

After thinking more on this i realized that it has to be responsibility of remote api to return filtered results, not the typeahead. Since i was using static json datasource my returned results are same every time for which one should use prefetch. So closing this issue.

[joelataylor]

swapnil-mishra - could you post your 'template' - I'm trying to use the Handlebars engine as well, but seems to have some issues with my template layout.

Thx!

[swapnilmishra]

Below is my handlebars template

<script type="text/x-handlebars-template" id='myTemplate'>
  <div>{{somedata}}</div>
</script>

And the typeahead init code. Please note that you in case of Handlebars you need to put compiled template in typeahead template option. This is because of the fact the Handlebars doesn't have a render method so it doesn't adheres directly to typeahead templating engine requirements.

// compile template from the above source
var source = $('#myTemplate').html();
var template = Handlebars.compile(source);

$('#typeahead').typeahead({
    minLength: 3,
    remote: {
      url : 'someurl'
    },
   template: template,
    engine: Handlebars
});

[joelataylor]

Thx swapnil-mishra - that helps!!