autouzupełniania jQuery danych za pomocą JSON

Question

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

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

Stosując metodę autouzupełniania jQuery, chcę być w stanie wyświetlić kolorjako opcji, aby wybrać i wstawić wartość 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 prezentacji. Selektor do wyszukiwania w kolorach, input.color o wartości kolor wartość i input.value z wartością wartość wartość.

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

i to HTML:

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

i ten jQuery:

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

Śledziłem odpowiedź Andrzeja i go prosi mnie o wybranie danych, ale jeśli powiadomię ui.label i ui.value zmiennych, mówi "niezdefiniowany". czego mi brakuje?

Edit2: Powiedzmy mam to HTML:

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

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

to możliwe, aby obsłużyć wiele selektorów w taki sam sposób .autocomplete()? Na przykład wybierz etykietę, którą chcę, używając input.name i zaktualizuj tylko numer input.value obok?

[input.name] [input.value]
^ ja wybrać              ^aktualizuje
    etykietę                       wartość obok
[nazwa wejściowa] [wartość wejściowa]
^ ta pozostaje nienaruszona^

Answer 1

Korzystanie z pilota 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(); 
    } 
}); 

Tweak połączenia $.ajax ile potrzeba. Ten przykład wygeneruje żądania do twojego zasobu PHP, które wyglądają tak:

my_server_side_resource.php?Termin = xyz

Jeśli masz kontrolę nad kodu po stronie serwera, można zmienić dane, który jest zwrócony do wyglądać tak:

[ 
    { 
     label: "red", 
     value: "#f00" 
    }, /* etc */ 
] 

można po prostu użyć ciąg, nazwę swojej server-side zasób jako source:

$("#selector").autocomplete({ 
    source: "my_server_side_resource.php", 
    select: /* same as above */ 
}); 

Sprawdź remote with JSONP example dla pełnego przykład przy użyciu zasobów po stronie serwera.

Edit: Zobacz przykład na demo jest wykonywana przy użyciu lokalnego dane: http://jsfiddle.net/SMxY6/

Answer 2

Musisz zmienić swój obiekt JSON do korzystania z „label” mienia. Od docs:

tablicę obiektów z właściwościami etykiety i wartości: [{label: "Choice1", wartość "wartość1"}, ...]

Właściwość Etykieta jest wyświetlana w menu sugestii. Wartość zostanie zmieniona na w elemencie wejściowym po tym, jak użytkownik wybrał z menu coś, co zostało oznaczone jako . Jeśli podana jest tylko jedna właściwość, będzie ona używana dla obu, np. jeśli podasz tylko wartości-właściwości, wartość będzie również użyta jako etykieta.

Następnie należy ustawić wartości pozostałych pól tekstowych po wywołaniu zdarzeń "zmiana" lub "wybierz".

Answer 3

Po godzinach pracy ... W końcu udało się. Chodzi o to, że mam tablicę json składającą się z wielu obiektów json. Każdy obiekt Json ma nazwę banku, a jego kod ifsc. Użytkownik musi wpisać "Typ banku" i odfiltrować wiersz szczegółów banku z bazy danych. Po wybraniu tego banku ... Miałem 2 pola wejściowe jeden dla banku i inne dla kodu ifsc. Wybieram nazwę banku i odpowiadający mu kod ifsc. Tak to jest, jak 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); 
     } 

}); 
}); 

---

mój tablicy json = [{ label: "bank stan Indii", wartość: "SBIN00076" } , { etykieta "ICICI banku" wartość "ICIC001" } .. ]