web-dev-qa-db-ja.com

JSONデータを使用したAjax / Jqueryオートコンプリート

JQuery UIのオートコンプリートフィールドを設定して、ajax接続からのデータを取得しようとしています。これまでの私のコードは次のとおりです。

            $("#mainIngredientAutoComplete").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "../api/IngredientChoices",
                        dataType: "json",
                        success: function (data) {
                            response(function (item) {
                                return {
                                    label: item.MainName,
                                    value: item.MainItemID
                                }
                            });
                        }
                    });
                }
            });

これは私のJSONです。

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]

HTML：

<table id="tbl_ingredients" style="padding:0px;">
                <tr id="ingHeader">
                    <td>Ingredient</td>
                    <td>Measurement</td>
                    <td>Amount</td>
                    <td><input id="mainIngredientAutoComplete" /></td>
                    <td></td>
                </tr>
</table>

「mil」（ミルクの場合）と入力し始めると、コードで次のエラーが発生します。

enter image description here

編集：

私はあなたの変更を行いましたが、いくつかの試みでうまくいきましたが、今では新しいエラーが発生しています-

[URL]の55行、25列目の未処理の例外

0x800a1391-Microsoft JScriptランタイムエラー：「データ」が未定義

        $("#mainIngredientAutoComplete").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "../api/IngredientChoices",
                    dataType: "json",
                    response: ($.map(data, function(v,i){
                        return {
                            label: v.MainName,
                            value: v.MainItemID

                        }}))
                });
            }
        });
jqueryajaxjsonjquery-uijquery-ui-autocomplete
12
Yecats

成功のコールバックをに変更する必要があります

response($.map(data, function(v,i){
    return {
                label: v.MainName,
                value: v.MainItemID
               };
}));

フィドル 。

jQuery.map は、配列またはオブジェクトのすべてのアイテムを新しいアイテムの配列に変換するのに役立ちます。

更新：フィルターを追加

$("#mainIngredientAutoComplete").autocomplete({
    source: function (request, response) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        $.ajax({
            url: "../api/IngredientChoices",
            dataType: "json",
            success: function (data) {
                response($.map(data, function(v,i){
                    var text = v.MainName;
                    if ( text && ( !request.term || matcher.test(text) ) ) {
                        return {
                                label: v.MainName,
                                value: v.MainItemID
                               };
                    }
                }));
            }
        });
    }
});
22
Arun P Johny