Typeahead.js不顯示下拉菜單

我從遠程位置使用dataType:'jsonp'獲取源代碼，如果我在Chrome瀏覽器上看到了開發人員工具，我收到了某些數據的響應，但從未出現前端的下拉菜單。Typeahead.js不顯示下拉菜單

這是我使用的代碼：

$(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/

來源

2014-01-18 jcvegan

做這樣的工作？ http://jsfiddle.net/trevordowdle/XtLrH/2/使用下面的小提琴參考.. http://jsfiddle.net/Sherbrow/p3wXs/ – Trevor

有一次，當我使用typeahead.js，我遇到了類似的問題窗戶無法打開 - 事實證明這是一個CSS問題。如果下拉菜單顯示爲元素，請嘗試檢查Chrome調試器。 –

你解決了這個問題嗎？正如我在回答中所說的那樣，這是一個跨域問題。 –

既然你的要求是JSONP，你需要處理的jQuery在您的Web服務器添加的回調。

我試圖從你的網絡服務器獲得JSONP，如jQuery做：

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

看來，Web服務器不處理的JSONP回調，所以jQuery也沒有得到預期的迴應。此外，如果您的前端和後端使用不同的域，則需要更改JSONP響應中的Access-Control-Allow-Origin標頭。

來源

2014-01-22 19:32:51

我該怎麼做？我的意思是更改jsonp響應中的標題 – jcvegan

您使用的是什麼語言？ [PHP JSONP回調示例]（http://www.sencha.com/forum/showthread.php?239737-JSONP-How-and-where-to-define-callback-function）和[PHP Access-Control-Allow- Origin Header]（http://stackoverflow.com/questions/7564832/how-to-bypass-access-control-allow-origin） –

我通過第一分路調查這一問題，並修改您的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值設置爲更新的值也是一個好主意。

來源

2014-01-23 01:19:37

Typeahead.js不顯示下拉菜單

回答

相關問題