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.color

z wartością

zabarwienie

i

input.value

z

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.label

i

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.name

i zaktualizuj tylko

input.value

obok niej?
[input.name] [input.value]

^ Wybieram ^ aktualizacje

wartość etykiety obok niego

[input.name] [input.value]

^ pozostaje nienaruszona ^

Zaproszony:

4 odpowiedzi

Anonimowy użytkownik

Potwierdzenie od:

Korzystanie ze zdalnego źródła danych:

$("#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();

 }

});

W razie potrzeby dostosuj wywołanie

$ .ajax

. 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:

[

 {

 label: "red",

 value: "#f00"

 },/* etc */

]

Możesz po prostu użyć ciągu, nazwy zasobu serwera jako

source

:

$("#selector").autocomplete({

 source: "my_server_side_resource.php",

 select:/* same as above */

});

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:

Musisz zmienić obiekt JSON, aby używał właściwości „label”. Z dokumentów:

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:

$(function() {

 $("#subject_name").autocomplete({

 source: function(request, response) {

 $.ajax({

 url: "api/listBasicsubject",

 dataType: "json",

 type: "POST",

 data: {

 subject_name: request.term, },

 success: function(data) {

 response($.map(data.data, function(item) {

 return {

 label: item.subject_name,

 value: item.subject_name }

 });

 }

 },

 autoFocus: true,

 minLength: 1

 });

 });

 });

Anonimowy użytkownik

Potwierdzenie od:

Po kilku godzinach pracy… W końcu się udało. Rzecz w tym, że mam tablicę json składającą się z wielu obiektów json. Każdy obiekt json ma nazwę banku i jego kod ifsc. Użytkownik musi wejść do banku i przefiltrować ciąg zawierający szczegóły banku z bazy danych. Wybierając ten bank ... miałem 2 pola wejściowe, jedno dla banku a drugie dla kodu ifsc.
Wybieram nazwę banku i pokazuję odpowiedni kod ifsc. Więc tak to zrobiłem: -

<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);

 }});

});

moja tablica json = [{
napis: „State Bank of India”,
wartość: „SBIN00076”
},
{
tag: "ICICI Bank",
wartość: „ICIC001”
},..
]

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

Autouzupełnianie JQuery przy użyciu danych JSON

4 odpowiedzi

Powiązane pytanie

Stan problemu

Autouzupełnianie JQuery przy użyciu danych JSON

Linki dotyczące treści

4 odpowiedzi

Powiązane pytanie

Stan problemu