Javascript Typeahead.js不显示下拉列表

我使用

数据类型：'jsonp'

从远程位置获取源代码，如果我在chrome上看到开发人员工具，我会得到一个带有特定数据的响应，但typeahead的下拉列表从未出现

这是我正在使用的代码：

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

$（文档）.ready（函数（）{
$（'#txtmedicalmentos'）。请提前键入({
标题：'Medicamentos'，
模板：[{{descriptionMedicamento}}].join（“”），
限额：10，
最小长度：3，
远程：{
网址：'http://geofarma.pe/service/GetMedicamentos/%QUERY',
过滤器：函数（parsedResponse）{
console.log（parsedResponse）；
对于（i=0；i

---

演示：

因为您的请求是JSONP，所以您需要在Web服务器中处理jQuery添加的回调

我尝试从您的Web服务器获取JSONP，就像jQuery那样：

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

---

另外，如果前端和后端使用不同的域，则需要更改JSONP响应中的

访问控制允许源文件
标题。
我首先通过分支和修改JSFIDLE来研究这个问题：


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

当我搜索“TEST”时，我可以在浏览器控制台中看到返回的结果（在本例中为两条记录）：

但是，问题是服务器返回的数据对JSONP请求具有错误的响应头：

Content-Type:application/json

由于这是一个跨域请求，并且您正在返回JSONP数据，您应该将响应头更改为：

（有关更多信息，请参阅）

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

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

看起来也不对的是“Expires”值；根据这一点，响应数据于1981年到期

因此，要解决此问题，您似乎需要修改服务调用（即），以便它在响应头中返回正确的内容类型。将Expires值设置为更为当前的值也是一个好主意。
类似的操作是否有效？请参考以下提琴。。有一次，当我使用typeahead.js时，我遇到了一个类似的问题，窗口无法打开——结果证明这是一个CSS问题。如果下拉菜单显示为元素，请尝试在Chrome调试器中进行检查。是否解决了此问题？正如我在回答中所说，这是一个跨领域的问题。我如何才能做到这一点？我的意思是更改jsonp响应的标题您使用的是什么语言？和
Content-Type:application/javascript

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