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"}]
任何想法,将不胜感激。
史蒂夫
答
我有我的代码问题竟然是dataType: "jsonp"
声明。我经历了许多我的代码迭代。有一次,我引用了一个不同的域名。这导致我使用jsonp数据类型。
最后,我引用了一个不需要具有jsonp数据类型的Relative Url。
我将ajax调用更改为dataType: "json"
,它被修复了。
所以当你输入一个搜索词时,你会在输入时看到“GetPerscriptions”方法的“GET”请求? – 2014-10-04 22:26:21
我看到了GET操作(通过Chrome Inspect)。正如我上面的示例所示,我得到一个有效的JSON响应。就好像结果进入'以太'。当我启用我的调试器时;声明,他们从来没有得到它。 – Steve 2014-10-05 00:06:33
有多奇怪。作为一个测试尝试使用完整的URL而不是相对的,并重新启用调试器语句。 – 2014-10-05 00:31:09