6

次のデータを含む json ファイルを想像してください。

[
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    }
]

jQuery のオートコンプリート メソッドを使用して、入力値を選択して挿入するオプションとして色を表示できるようにしたいと考えています。

<input type="text" name="selector" id="selector" />

<input type="text" name="color" id="color" />
<input type="text" name="value" id="value" />

上記は紹介不要です。色の値と値のinput.color値を使用して、色を検索するためのセレクター。input.value

編集: 私はこのJSONデータを持っています:

[{
    "label": "Sec\u00e7\u00e3o 1",
    "value": "1"
}, {
    "label": "Sec\u00e7\u00e3o 2",
    "value": "2"
}, {
    "label": "Sec\u00e7\u00e3o 3",
    "value": "3"
}, {
    "label": "Sec\u00e7\u00e3o 4",
    "value": "4"
}]

そしてこのHTML：

<input type="text" id="name" />
<input type="text" id="value" />

そしてこのjQuery：

$(document).ready(function(){
    $("#name").autocomplete({
        source: "json.php",
        select: function (event, ui) {
            $("#name").val(ui.label);
            $("#value").val(ui.value);
        }
    });
});

アンドリューの答えに従ったところ、データを選択するように求められましたが、アラートui.labelとui.value変数を指定すると、「未定義」と表示されます。私は何が欠けていますか？

Edit2: このHTMLがあるとしましょう:

<input type="text" class="name" />
<input type="text" class="value" />

<input type="text" class="name" />
<input type="text" class="value" />

.autocomplete()同じメソッドで複数のセレクターを処理することは可能ですか? 同様に、を使用して必要なラベルを選択し、input.nameその隣だけを更新input.valueしますか?

[input.name] [input.value]
^ 選択 ^
  隣のラベル値を更新
[input.name] [input.value]
^ これはそのまま ^

4

4 に答える 4

14

リモート データ ソースの使用:

$("#selector").autocomplete({
    source: function (request, response) {
         $.ajax({
             url: "my_server_side_resource.php",
             type: "GET",
             data: request,
             success: function (data) {
                 response($.map(data, function (el) {
                     return {
                         label: el.color,
                         value: el.value
                     };
                 }));
             }
         });
    },
    select: function (event, ui) {
        // Prevent value from being put in the input:
        this.value = ui.item.label;
        // Set the next input's value to the "value" of the item.
        $(this).next("input").val(ui.item.value);
        event.preventDefault();
    }
});

$.ajax必要に応じて呼び出しを微調整します。この例では、次のような PHP リソースへのリクエストを生成します。

my_server_side_resource.php?term=xyz

サーバー側のコードを制御できる場合は、返されるデータを次のように変更できます。

[
    {
        label: "red",
        value: "#f00"
    }, /* etc */
]

サーバー側リソースの名前である文字列を次のように使用できますsource。

$("#selector").autocomplete({
     source: "my_server_side_resource.php",
     select: /* same as above */
});

サーバー側のリソースを使用した完全な例については、JSONPを使用したリモートの例を確認してください。

編集:ローカル データを使用した実際のデモについては、この例を参照してください: http://jsfiddle.net/SMxY6/

于 2012-07-17T23:26:25.627 に答える
2

"label" プロパティを使用するには、JSON オブジェクトを変更する必要があります。ドキュメントから：

label プロパティと value プロパティを持つオブジェクトの配列: [ { label: "Choice1", value: "value1" }, ... ]

label プロパティが提案メニューに表示されます。ユーザーがメニューから何かを選択した後、値が入力要素に挿入されます。プロパティが 1 つだけ指定されている場合は、両方に使用されます。値プロパティのみを指定すると、値はラベルとしても使用されます。

次に、「変更」または「選択」イベントが発生したときに、他のテキスト フィールドの値を設定する必要があります。

于 2012-07-17T23:30:21.980 に答える
0

何時間も働いた後..ついに実現しました。問題は、多くの json オブジェクトで構成される json 配列を持っていることです。各 json オブジェクトには、銀行名とその ifsc コードがあります。ユーザーは、bank と入力し、データベースから銀行の詳細行を除外する必要があります。その銀行を選択すると...銀行用とifscコード用の2つの入力フィールドがありました。銀行名を選択すると、対応する ifsc コードが表示されます。だからこれは私がそれをした方法です:-

<script type="text/javascript">
$(function() {





    $("#newBeneBankName").autocomplete({

        source: function(request, response) {

            $.ajax({
                url: "getBankDetailsIFSCJson",
                type: "GET",
                data: {
                    term: request.term
                },
                dataType: "json",
                success: function (data) {
                    response($.map(data, function (el) {
                        return {
                            label: el.label,
                            value: el.value
                        };
                    }));
                }
            });
        }, //newBeneBankName addBeneIfscCode
        focus: function (event, ui) {
            event.preventDefault();
            $("#newBeneBankName").val(ui.item.label);
        },
        select: function (event, ui) {
            event.preventDefault();
            $("#addBeneIfscCode").val(ui.item.value);
            $("#newBeneBankName").val(ui.item.label);
        }

});
});

my json array= [ { label:"state bank of India", value:"SBIN00076" }, { label:"ICICI Bank", value:"ICIC001" },.. ]

于 2018-02-28T08:39:47.093 に答える