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.label
und 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 ^
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mithilfe einer remote-Datenquelle:
Zwicken die
$.ajax
nennen, wie gebraucht. Dieses Beispiel generiert über die Anforderungen an Ihren PHP-Ressource, die wie folgt Aussehen:Wenn Sie die Kontrolle über Ihre server-side-code, Sie könnte sich ändern, die Daten, die zurückgegeben wird wie folgt Aussehen:
Können Sie einfach eine Zeichenfolge, die den Namen Ihres server-seitige Ressourcen, wie die
source
:Check-out die Fernbedienung mit JSONP Beispiel für ein vollständiges Beispiel mit einem server-side-Ressource.
Edit: Finden Sie in diesem Beispiel für eine funktionierende demo mit lokalen Daten: http://jsfiddle.net/SMxY6/
Schauen Sie bitte auf meinen edit... ich sehe nicht was mir fehlt...
Sorry, ich hatte einen kleinen Fehler in meinem code! Sie möchten
ui.item.label
nicht nurui.label
.Danke, es hat geklappt! Jetzt habe ich ein kleines problem... ich bin mit der
input#name
für beide Selektor und die Beschriftung... Aber nach Auswahl, ändert sich der Wert zuvalue
stattlabel
...Siehe mein update auf die
select
Veranstaltung. Vielleicht wollen Sie auch das gleiche zu tun, in derfocus
Veranstaltung.InformationsquelleAutor Andrew Whitaker
Sie brauchen, um Ihre JSON-Objekt zu verwenden, das "label" - Eigenschaft. Aus den docs:
Dann musst du die Werte der Textfelder aus, wenn der "change" oder "select" - Ereignisse ausgelöst werden.
InformationsquelleAutor solidau
Nach Stunden der Arbeit.. Schließlich haben es möglich gemacht. Sache ist, ich habe ein json-array bestehend aus vielen json-Objekte. Jedes json-Objekt hat den Namen der bank und deren ifsc-code.Benutzer benötigt, um zu Geben Sie die bank-und filter-bank-detail-Zeile aus der Datenbank. Bei der Auswahl der bank... ich hatte 2 Eingabefelder eines für die bank und anderen für die ifsc-code.
Wähle ich den Namen der bank und die entsprechenden ifsc code angezeigt wird. Also das ist, wie ich es gemacht habe:-
mein json array= [ {
label:"state bank of india",
Wert:"SBIN00076"
},
{
label:"ICICI Bank",
Wert:"ICIC001"
},..
]
InformationsquelleAutor Debasish Ghosh