Autouzupełnianie JQuery przy użyciu danych JSON
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 była w stanie wyświetlić
kolor
jako opcje wyboru i wstawienia
znaczenie
przy wejściu.
<input type="text" name="selector" id="selector"/><input type="text" name="color" id="color"/>
<input type="text" name="value" id="value"/>
Powyższego nie trzeba przedstawiać. Selektor do wyszukiwania według kolorów,
input.colorz wartością
zabarwienie
i
input.valuez
wartość
wartości.
EDIT:
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 to jest HTML:
<input type="text" id="name"/>
<input type="text" id="value"/>
a to jest 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ą Andrew i zasugerował, żebym wybrał dane, ale jeśli zaalarmuję zmienne
ui.labeli
ui.value, pojawia się komunikat „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 ta sama metoda
.autocomplete ()może obsługiwać wiele selektorów? Na przykład wybierz etykietę, którą chcę, za pomocą
input.namei zaktualizuj tylko
input.valueobok niej?
[input.name] [input.value]
^ Wybieram ^ aktualizacje
wartość etykiety obok niego
[input.name] [input.value]
^ pozostaje nienaruszona ^
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
4 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
W razie potrzeby dostosuj wywołanie . Ten przykład wygeneruje żądania do twojego zasobu PHP, które wyglądają następująco:
my_server_side_resource.php? term = abc
Jeśli masz kontrolę nad kodem po stronie serwera, możesz zmodyfikować zwracane dane, aby wyglądały następująco:
Możesz po prostu użyć ciągu, nazwy zasobu serwera jako :
Czek
zdalne sterowanie z przykładem JSONP
http://jqueryui.com/demos/auto ... jsonp
-Kompletny przykład wykorzystania zasobów serwera.
Edytować:
zobacz ten przykład, aby zobaczyć działające demo z wykorzystaniem danych lokalnych:
http://jsfiddle.net/SMxY6
http://jsfiddle.net/SMxY6/
/
Anonimowy użytkownik
Potwierdzenie od:
Tablica obiektów z właściwościami etykiety i wartości:
[{etykieta: "Wybór1", wartość: "wartość1"}, ...]
Właściwość etykiety pojawi się w menu sugestii. Wartość
zostaną wstawione do elementu wejściowego po tym, jak użytkownik coś wybierze
z menu. Jeśli określono tylko jedną właściwość, będzie ona używana w
na przykład oba. jeśli podasz tylko właściwości wartości, ta wartość również będzie
używany jako etykieta.
Następnie musisz ustawić wartości innych pól tekstowych podczas uruchamiania zdarzeń „zmień” lub „wybierz”.
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
Wybieram nazwę banku i pokazuję odpowiedni kod ifsc. Więc tak to zrobiłem: -
moja tablica json = [{
napis: „State Bank of India”,
wartość: „SBIN00076”
},
{
tag: "ICICI Bank",
wartość: „ICIC001”
},..
]