Typeahead.js not showing dropdown

Question

I'm getting source from a remote location using the dataType:'jsonp'and if i see the developer tool on chrome, I'm getting a response with certain data but the dropdown of the typeahead never appears.

This is the code I'm using:

$(document).ready(function(){
$('#txtMedicamentos').typeahead({
    header:'<b>Medicamentos</b>',
    template:['<span>{{descripcionMedicamento}}</span>'].join(''),
    limit:10,
    minLength: 3,
    remote:{
        url:'http://geofarma.pe/service/GetMedicamentos/%QUERY',
        filter: function(parsedResponse){
            console.log(parsedResponse);
            for (i = 0; i < parsedResponse.length; i++) {
                parsedResponse[i].value = parsedResponse[i].descripcionMedicamento;
                parsedResponse[i].tokens = new Array(parsedResponse[i].descripcionMedicamento);
            }
            return parsedResponse;
        },
        dataType: 'jsonp'
    },
    engine:Hogan
});
});

The demo : http://jsfiddle.net/XtLrH/

Answer 1

Since your request is JSONP, you need to handle the callback added by jQuery in your webserver.

I have tried to get a JSONP from your webserver, like jQuery do:

http://geofarma.pe/service/GetMedicamentos/QUERY?callback=jQuery2101169277074432582543968319604650201646145433_1390418575420&_=1390418575421

Seems that the webserver is not handling the JSONP callback, so jQuery does not getting the expected response.

Also, if your front-end and back-end are using different domains, you need to change the Access-Control-Allow-Origin header in your JSONP responses.