Typeahead / Bloodhound Remote不返回数据

时间:2014-10-03 17:31:51

标签: javascript jquery typeahead.js twitter-typeahead bloodhound

我正在尝试使用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"}]

任何想法都会受到赞赏。

史蒂夫

1 个答案:

答案 0 :(得分:0)

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

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

我将ajax调用更改为dataType: "json",并且已修复。