Wyobraź sobie plik json z następującymi danymi:

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

Korzystając z metody autouzupełniania jQuery, chcę, aby mogła wyświetlaćkolor jako opcje do wyboru i wstawieniawartość na wejściu.

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

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

Powyższe nie wymaga wprowadzenia. Selektor do wyszukiwania kolorów,input.color zkolor wartość iinput.value zwartość wartość.

EDYTOWAĆ: Mam te dane 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"
}]

a ten HTML:

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

a to jQuery:

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

Podążyłem za odpowiedzią Andrzeja, która prosi mnie o wybranie danych, ale jeśli się ostrzeżęui.labeliui.value zmienne, mówi „undefined”. czego mi brakuje?

Edit2: Powiedzmy, że mam ten HTML:

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

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

Czy można obsługiwać wiele selektorów tym samym.autocomplete() metoda? Na przykład wybierz etykietę, którą chcę użyćinput.name i aktualizuj tylkoinput.value obok tego?

[input.name] [input.value]
^ Wybieram ^ aktualizuje
wartość etykiety obok
[input.name] [input.value]
^ to pozostaje nienaruszone ^