0

Twitter Bootstrap Typeahead プラグインのサンプル コードを作成してきました。

スクリプトの初期の開発バージョンでは、完全に機能するいくつかのカスタマイズを使用して、例からほぼ直接持ち上げた次のものを含めました。

$('.building_selector').typeahead({
    source: function (query, process) {
        buildings = [];
        map = {};   
        var data = [{"buildingNumber":"1","buildingDescription":"Building One"},{"buildingNumber":"2","buildingDescription":"Building Two"},{"buildingNumber":"3","buildingDescription":"Building Three"}];
        $.each(data, function (i, building) {
            map[building.buildingDescription] = building;
            buildings.push(building.buildingDescription);
        });
        process(buildings);
},
updater: function (item) {
    selectedBuilding = map[item].buildingNumber;
    return item;    
},
});

実際には、オプションの配列がコードに直接書き込まれている間は、これはあまり役に立たないので、JSON が書き込まれた外部ファイルの読み取りを検討してきました。配列は次のとおりです。

[{"buildingNumber":"1","buildingDescription":"Building One"},
{"buildingNumber":"2","buildingDescription":"Building Two"},
{"buildingNumber":"3","buildingDescription":"Building Three"}]

そして、Javascript を更新して、リモート ファイルをロードするコードを含めようとしました。ファイルが存在し、正しい相対位置にあることを確認できます。

$('.building_selector').typeahead({
    source: function (query, process) {
        buildings = [];
        map = {};
        var data = function () {
            $.ajax({
                'async': false,
                'global': false,
                'url': "../json/buildings",
                'dataType': "json",
                'success': function (result) {
                    data = result;
                }
             });
            return data;
        }(); 

    $.each(data, function (i, building) {
        map[building.buildingDescription] = building;
        buildings.push(building.buildingDescription);
    });

process(buildings);
    },

updater: function (item) {
    selectedBuilding = map[item].buildingNumber;
    return item;    
},
});

ページを実行すると、すべての要素が期待どおりに動作しているように見え、テキスト フィールド内をクリックして入力するまで、コンソールには何も表示されません。各キーを押した後、目に見えることは何もありませんが、コンソールに次のように表示されます。

キャッチされていない TypeError: 未定義のプロパティ '長さ' を読み取ることができません [jquery.min.js:3]

これを試して修正するためのアイデア/考え/出発点は大歓迎です!

4

2 に答える 2

0

最終的に到達したポイントについて少し説明を追加します。これはかなりの変更です。

JSON ファイルのコンテンツは動的ですが、キーを押すたびに呼び出す必要はないため$.getJSON、$document.ready(). 次に、コンテンツをグローバル変数に書き込みます。これは、以前とまったく同じようにソース関数によってロードできます。

参照用のコードは次のとおりです。

$('.building_selector').typeahead({
    source: function (query, process) {
        buildings = [];
        map = {};   
        $.each(buildinglist, function (i, building) {
            map[building.buildingDescription] = building;
            buildings.push(building.buildingDescription);
        });
        process(buildings);
    },
    updater: function (item) {
        selectedBuilding = map[item].buildingNumber;
        return item;    
    },
});
var buildingList;
$(document).ready(function() {
    $.getJSON('../json/buildings/', function(json){
        buildinglist = json;
    });
});
于 2013-04-01T13:42:17.863 に答える