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/

Does something like this work? http://jsfiddle.net/trevordowdle/XtLrH/2/ Use the following fiddle for reference.. http://jsfiddle.net/Sherbrow/p3wXs/ — Trevor, Jan 20 '14 at 22:35
Once when I was using typeahead.js, I ran into a similar issue where the window wouldn't open - it turns out it was a CSS issue. Try checking in the Chrome debugger if the dropdown menu appears as an element. — Keshav Saharia, Jan 27 '14 at 19:53
Did you fix the problem? As I said in my answer, it's a cross-domain issue. — Ben Smith, Jan 31 '14 at 01:00

score 1 · Answer 1 · edited May 23 '17 at 12:21

I investigated this issue by first branching and modifying your jsfiddle:

http://jsfiddle.net/Fresh/gYFDV/

When I ran this example I then encountered your issue i.e. the dropdown is not displaying the search results even though the remote request is returning valid JSON data.

When I searched for "TEST", I can see in the browser console that results are returned (in this case two records) :

0: {codigoMedicamento:16858, descripcionMedicamento:TESTOVIRON DEPOT 250mg/mL Inyectable,…}
1: {codigoMedicamento:17091, descripcionMedicamento:TESTONON Inyectable,…}

However, the problem is that your server is returning data with the wrong response header for a JSONP request:

Content-Type:application/json

As this is a cross-domain request and you are returning JSONP data, you should change your response header to:

Content-Type:application/javascript

(See here for more info)

Additionally the full response header looks like this:

Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:Keep-Alive
Content-Language:es-PE
Content-Type:application/json
Date:Thu, 23 Jan 2014 00:00:00 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=5, max=100
Pragma:no-cache
Server:Apache
Transfer-Encoding:chunked

What also does not look right is the "Expires" value; according to this the response data expired in 1981!

Hence to fix this problem it looks like you need to modify the service call (i.e. http://geofarma.pe/service/GetMedicamentos) so that it returns the correct Content-Type in its response header. Setting the Expires value to something more current is a good idea too.

score 0 · Accepted Answer · answered Jan 22 '14 at 19:32

0

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.

answered Jan 22 '14 at 19:32

Edu Lomeli

2,263
20
18

How can I do that? I mean change the header on the jsonp response – jcvegan Jan 22 '14 at 22:18
What language are you using? [PHP JSONP callback example](http://www.sencha.com/forum/showthread.php?239737-JSONP-How-and-where-to-define-callback-function) and [PHP Access-Control-Allow-Origin Header](http://stackoverflow.com/questions/7564832/how-to-bypass-access-control-allow-origin) – Edu Lomeli Jan 22 '14 at 23:09

Typeahead.js not showing dropdown

2 Answers2