Question

我使用dataType:'jsonp'从远程位置获取源代码，如果我在chrome上看到开发人员工具，我会收到包含某些数据的响应，但是从未出现过类型的下拉列表。

这是我正在使用的代码：

$(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
});
});

演示：http://jsfiddle.net/XtLrH/

Answer 1

我通过首先分支和修改你的jsfiddle来调查这个问题：

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

当我运行此示例时，我遇到了您的问题，即即使远程请求返回有效的JSON数据，下拉列表也不会显示搜索结果。

当我搜索“TEST”时，我可以在浏览器控制台中看到返回的结果（在这种情况下是两条记录）：

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

但是，问题是您的服务器返回的数据包含错误的JSONP请求响应标头：

Content-Type:application/json

由于这是一个跨域请求，而您要返回JSONP数据，因此应将响应标题更改为：

Content-Type:application/javascript

（有关详细信息，请参阅here）

此外，完整的响应标头如下所示：

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

看起来不正确的是“过期”值;据此，响应数据于1981年到期！

因此，为了解决这个问题，您需要修改服务调用（即http://geofarma.pe/service/GetMedicamentos），以便在响应头中返回正确的Content-Type。将Expires值设置为更新的值也是一个好主意。

Answer 2

由于您的请求是JSONP，因此您需要在Web服务器中处理由jQuery添加的回调。

我试图从你的网络服务器获得一个JSONP，比如jQuery do：

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

似乎网络服务器没有处理JSONP回调，因此jQuery没有得到预期的响应。

此外，如果您的前端和后端使用不同的域，则需要更改JSONP响应中的Access-Control-Allow-Origin标头。

Typeahead.js没有显示下拉列表

2 个答案: