22

Twitter ブートストラップを使用して、DB からメーカーを取得しようとしています。

Twitter ブートストラップ typeahead は ajax 呼び出しをサポートしていないため、次のフォークを使用しています。

https://gist.github.com/1866577

そのページには、私がやりたいことを正確に行う方法について言及しているこのコメントがあります。問題は、取得し続けるコードを実行するときです。

Uncaught TypeError: 未定義のメソッド 'toLowerCase' を呼び出せません

私はグーグルで検索し、jqueryファイルを、縮小されたものと縮小されていないもの、およびGoogleコードでホストされているものの両方を使用して変更しようとしましたが、同じエラーが発生し続けました。

現在、私のコードは次のとおりです。

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

URLフィールドに追加しました

window.location.origin

別の質問ですでに説明したように、問題を回避するため

また、私が使用していた前に、同様の質問でTomislav Markovskiを推奨として$.each()使用することにしました$.map()

なぜこの問題が発生し続けるのか、誰にも分かりますか?!

ありがとうございました

4

9 に答える 9

10

先行入力は、ソースとして文字列のリストを期待します

$('#manufacturer').typeahead({
    source : ["item 1", "item 2", "item 3", "item 4"]
})

あなたの場合、オブジェクトのリストでそれを使用したいと考えています。このように、機能させるにはいくつかの変更を加える必要があります

これはうまくいくはずです：

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer,

                        toString: function () {
                            return JSON.stringify(this);
                        },
                        toLowerCase: function () {
                            return this.manufacturer.toLowerCase();
                        },
                        indexOf: function (string) {
                            return String.prototype.indexOf.apply(this.manufacturer, arguments);
                        },
                        replace: function (string) {
                            return String.prototype.replace.apply(this.manufacturer, arguments);
                        }
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'manufacturer',
    items:11,
    onselect: function (obj) {
        var obj = JSON.parse(obj);

        // You still can use the manufacturer_id here 
        console.log(obj.manufacturer_id);

        return obj.manufacturer;
    }
});
于 2012-11-01T00:22:55.967 に答える
8

私の場合、この正確なエラーが発生していました。使用していた Bootstrap のバージョン (2.0.4) は、関数を設定に渡すことをサポートしていないことが判明しましたsource。

Bootstrap 2.1.1 にアップグレードすると問題が解決しました。

于 2012-09-17T03:35:35.520 に答える
6

問題の更新/改訂されたルック： 「未定義のメソッド'toLowerCase'を呼び出せません」というエラーは、AJAXをサポートしないブートストラップで元のTypeahead拡張機能を使用したときに発生しました。（あなたが見つけたように）あなたはあなたの改訂されたものの代わりに、元の先行入力拡張がロードされていないことを確認しますか？

私はあなたが言及したもののわずかなバリエーションであるこの先行入力の要点をうまく使用しています。その要点に切り替えて、入力データが適切であることを確認すると（入力がJSオブジェクトの文字列配列であることをテストすると、問題は解決しました。

お役に立てれば

元の答え：

エラーが発生する理由は、先行入力マッチャー関数に渡された値が未定義であるためです。これは、入力とそのマッチャー関数の間のどこかで発生する実際の問題に対する単なる副作用です。'manufacturers'アレイに問題があると思われます。最初にテストして、有効なアレイがあることを確認してください。

// It appears your array constructor is missing ()
// try the following in your binding code:
var manufacturers = new Array();

これが、入力を先行入力にバインドするために使用しているものです。変更した先行入力フォークで動作することを確認しました。

私のHTML：

<!-- Load bootstrap styles -->
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
...

<input type="text" class="typeahead" name="Category" id="Category" maxlength="100" value="" />

...
<!-- and load jQuery and bootstrap with modified typeahead AJAX code -->
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="bootstrap-modified-typeahead.js" type="text/javascript"></script>

私のバインディングJavaScriptコード：

// Matches the desired text input ID in the HTML
var $TypeaheadInput = $("#Category");  

// Modify this path to your JSON source URL
// this source should return a JSON string array like the following:
// string[] result = {"test", "test2", "test3", "test4"}
var JsonProviderUrl = "../CategorySearch";

// Bind the input to the typeahead extension
$TypeaheadInput.typeahead({
    source: function (typeahead, query) {
        return $.post(JsonProviderUrl, { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});
于 2012-06-29T00:30:14.973 に答える
2

私の場合、ソース配列に null 値があり、このエラーが発生しました。

考案された例:

source : ["item 1", "item 2", null, "item 4"]
于 2014-03-24T04:33:18.303 に答える
1

あなたの製造元オブジェクトには「名前」プロパティがありません。変更する必要があります

property: 'name',

に

property: 'manufacturer',
于 2012-07-18T09:18:01.447 に答える
1

以下の例のようなマッピング変数を使用してみましたか? オブジェクトに複数のプロパティがある場合は、これを使用する必要があります。 

source: function (query, process) {
        states = [];
        map = {};

        var data = [
            {"stateCode": "CA", "stateName": "California"},
            {"stateCode": "AZ", "stateName": "Arizona"},
            {"stateCode": "NY", "stateName": "New York"},
            {"stateCode": "NV", "stateName": "Nevada"},
            {"stateCode": "OH", "stateName": "Ohio"}
        ];

        $.each(data, function (i, state) {
            map[state.stateName] = state;
            states.push(state.stateName);
        });

        process(states);
    }
于 2013-06-24T06:40:18.053 に答える
0

ファイルbootstrap3-typeahead.min.jsをhttps://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.jsのファイルに更新するだけでこの問題を解決しました

ほとんどの人はこの方法で解決できると思います。

于 2015-06-19T02:17:31.510 に答える