web-dev-qa-db-ja.com

twitter bootstrap typeahead（undefinedのメソッド 'toLowerCase'）

私はTwitterを使用しようとしていますbootstrap私のDBからメーカーを取得するために。

Twitter bootstrap typeaheadはajax呼び出しをサポートしていないため、このフォークを使用しています：

https://Gist.github.com/1866577

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

Uncaught TypeError：undefinedのメソッド '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

別の質問ですでに議論されているような問題を回避する

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

誰もがなぜこの問題が発生し続けるのか考えていますか？

ありがとうございました

javascriptjsontwitter-bootstraptypeahead.jstypeahead
22
mmoscosa

タイプアヘッドは文字列のリストをソースとして期待します

$('#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;
    }
});
9
ThomasDurin

私の場合、私はこの正確なエラーを受け取りました、そして、私が使用していたバージョンBootstrap（2.0.4）のバージョンはsource設定。

Bootstrap 2.1.1にアップグレードすると、問題が修正されました。

8
Matthew Schinckel

更新/改訂されたルックAT問題：「未定義のメソッド 'toLowerCase'を呼び出せません」というエラーが発生しましたbootstrapで元のTypeahead拡張機能を使用した場合、AJAXをサポートしていません。ご存じのとおり）元のTypeahead拡張機能が、修正された拡張機能ではなくロードされていないことを確認します？

私は無事に成功しました この要点を使用して これはあなたが言及したもののわずかなバリエーションです。そのGistに切り替えて、入力データが良好であることを確認したら（入力がJSオブジェクトの文字列配列であることをテストして）、問題はなくなりました。

お役に立てれば

元の答え：

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

// 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);
        });
    }
});
6
Dan Sorensen

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

考案された例：

source : ["item 1", "item 2", null, "item 4"]
2
rrrhys

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

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);
    }
1
Sgedda

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

property: 'name',

に

property: 'manufacturer',
1
grudolf

しばらく前にこの問題に遭遇しました。 typeaheadライブラリを含む構成を再確認することをお勧めします（main.js、app.jsまたはconfig.jsを使用）。

それ以外の場合は、 latest Bootstrap version をアプリケーションライブラリに上書きできます。

0
Shobhit Sharma

このコードを試してください：

String.prototype.hashCode = function(){
var hash = 0;
if (this.length == 0) return hash;
for (i = 0; i < this.length; i++) {
    char = this.charCodeAt(i);
    hash = ((hash<<5)-hash)+char;
    hash = hash & hash; // Convert to 32bit integer
}
return hash;
};

var map_manufacter, result_manufacters;
$('#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){

            result_manufacter = [], map_manufacters = {};
            $.each(results.data.manufacturers, function(item, data){                    
                map_manufacters[data.Manufacturer.manufacturer.hashCode()] = data;
                result_manufacters.Push(data.Manufacter.manufacter);
            });             
            typeahead.process(result_manufacters);                
        }
    });
},
property: 'name',
items:11,
onselect: function (obj) {
    var hc = obj.hashCode();
    console.log(map_manufacter[hc]);
}

}）;

0
luchopintado

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

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

0
Luiz Alberto Barbosa Mesquita