AutoComplete jQuery Mit JSON-Daten

Stellen Sie sich eine json-Datei mit den folgenden Daten:

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

Mithilfe von jQuery-autocomplete-Methode, ich will es anzeigen zu können Farbe Optionen select-und insert - Wert auf eine Eingabe.

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

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

Oben braucht keine Einführungen. Auswahl für die Suche auf die Farben, input.color mit Farbe Wert und die input.value mit Wert Wert.

EDIT:
Ich habe diese JSON-Daten:

[{
    "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"
}]

und das HTML:

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

und das jQuery:

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

Ich folgte Andrew ' s Antwort und es fordert mich auf wählen Sie die Daten, aber wenn ich alert ui.labelund ui.value Variablen, es sagt 'undefined'. Was bin ich?

Edit2:
Lassen Sie uns sagen, dass ich diese HTML:

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

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

Ist es möglich, um mehrere Selektoren mit der gleichen .autocomplete() Methode? Wie wählen Sie die label möchte ich mit der input.name und nur das update der input.value daneben?

[input.name] [input.Wert]

^ Ich wählen       ^ - updates

  Bezeichnung           Wert daneben

[input.name] [input.Wert]

^ diese intakt bleibt ^

Verwenden Sie einen remote-oder lokalen Datenquelle?
Es wird eine php-Datei, um die Werte aus einer DB und Codierung im JSON-format...
Ich habe nicht versucht, sehr viel, als ich noch versuchte, herauszufinden, was der richtige Weg ist, zu verwenden die jQuery-autocomplete...

InformationsquelleAutor silentw | 2012-07-17

Schreibe einen Kommentar