我正在尝试使用typeahead(v0.10.5)/ bloodhound来绑定返回的JSON数据。不幸的是,我的建议窗口中没有任何内容(即<input >
)。另外,我使用的是jQuery v2.0.3。
对我的端点的调用成功。当我在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 :(得分:0)
我的代码问题原来是dataType: "jsonp"
声明。我经历了一些代码的迭代。有一次,我引用了一个不同的域名。这导致我使用jsonp数据类型。
最后,我引用了一个不需要jsonp数据类型的Relative Url。
我将ajax调用更改为dataType: "json"
,并且已修复。