0

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"}]

任意の考えをいただければ幸いです。

スティーブ

4

1 に答える 1

0

dataType: "jsonp"コードで発生した問題は、ステートメントであることが判明しました。私は自分のコードを何度も繰り返しました。ある時点で、別のドメインを参照していました。これにより、jsonp データ型を使用するようになりました。

最後に、jsonp データ型を持つ必要のない相対 URL を参照しています。

ajax 呼び出しを に変更したところ、dataType: "json"修正されました。

于 2014-10-10T17:18:54.850 に答える