Typeahead/Bloodhound远程不返回数据

问题描述:

我试图让typeahead(v0.10.5)/ bloodhound绑定返回的JSON数据。不幸的是,我的建议窗口中没有显示任何内容(即,<input >)。另外,我正在使用jQuery v2.0.3。Typeahead/Bloodhound远程不返回数据

对我的端点的呼叫是成功的。当我检查Chrome中的结果时,我看到格式正确的响应(即数据和内容类型)。 Chrome的控制台窗口中没有出现错误。下面是一个JSON的例子。

我已经插入调试器;代码中的语句,但它们没有被击中。

jqXHR.setRequestHeader()在那里,因为我正在做一些跨站点调用。

HTML代码

<div id="remote"> 
    <input class="typeahead" type="text" placeholder="Prescription names"> 
</div> 

Javascript代码

我离开//调试;语句来显示我试图添加断点的位置。

<script type="text/javascript"> 
    $(document).ready(function() { 

     var prescriptions = new Bloodhound({ 
      datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.value); }, 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 

      remote: { 
       url: '/Prescription/GetPrescriptions/?searchTerm=%QUERY', 
       filter: function (prescriptions) { 
        //debugger; 
        return $.map(prescriptions, function (user) { 
         //debugger; 
         return { 
          value: user.Name 
         }; 
        }); 
       }, 
       ajax: { 
        type: 'GET', 
        dataType: 'jsonp', 
        beforeSend: function (jqXHR, settings) { 
         var authHeaders; 
         // pull apart jqXHR, set authHeaders to what it should be 
         //debugger; 
         jqXHR.setRequestHeader('Access-Control-Allow-Origin', '*'); 
        } 
       } 
      } 
     }); 
     // initialize the bloodhound suggestion engine 
     prescriptions.initialize(); 
     // instantiate the typeahead UI 
     $('#remote .typeahead').typeahead({ 
      minLength: 3, 
      highlight: true, 
      hint: true 
     }, 
      { 
       name: 'prescriptions', 
       displayKey: 'value', 
       source: prescriptions.ttAdapter() 
      }); 
    }); 

</script> 

JSON结果

[{"Name":"Drug1"}] 

任何想法,将不胜感激。

史蒂夫

+0

所以当你输入一个搜索词时,你会在输入时看到“GetPerscriptions”方法的“GET”请求? – 2014-10-04 22:26:21

+0

我看到了GET操作(通过Chrome Inspect)。正如我上面的示例所示,我得到一个有效的JSON响应。就好像结果进入'以太'。当我启用我的调试器时;声明,他们从来没有得到它。 – Steve 2014-10-05 00:06:33

+0

有多奇怪。作为一个测试尝试使用完整的URL而不是相对的,并重新启用调试器语句。 – 2014-10-05 00:31:09

我有我的代码问题竟然是dataType: "jsonp"声明。我经历了许多我的代码迭代。有一次,我引用了一个不同的域名。这导致我使用jsonp数据类型。

最后,我引用了一个不需要具有jsonp数据类型的Relative Url。

我将ajax调用更改为dataType: "json",它被修复了。