Auto-Vervollständigen jQuery JSON-Daten

Question

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

jQuery Autocomplete-Methode verwenden, möchte ich es in der Lage sein, die Farbe als Optionen anzuzeigen Wert auszuwählen und einzufügen auf einer Eingabe.

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

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

Das obige erfordert keine Einführungen. Selector für die Suche nach den Farben, input.color mit Farbe Wert und input.value mit Wert Wert.

EDIT: ich dieses JSON-Daten haben:

[{ 
    "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 HTML:

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

und diese jQuery:

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

ich Andrew Antwort folgte und es fordert mich auf, die Daten auszuwählen, aber wenn ich 01 warneund ui.value Variablen, es sagt 'undefined'. Was vermisse ich?

Edit2: Sagen wir, ich HTML haben:

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

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

Ist es möglich, mehrere Selektoren mit der gleichen .autocomplete() Methode zu behandeln? Wählen Sie zum Beispiel das gewünschte Etikett mit der input.name und nur die input.value daneben aktualisieren?

[input.name] [input.value]
^ ich wählen              ^aktualisiert die
    ein Etikett                       Wert daneben
[Eingabe.Name] [Eingabe.Wert]
^ diese intakt bleibt^

Answer 1

eine Remote-Datenquelle:

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

den $.ajax Anruf Tweak nach Bedarf. Dieses Beispiel erzeugt Anfragen an Ihre PHP-Ressource, die wie folgt aussehen:

my_server_side_resource.php?term = xyz

Wenn Sie die Kontrolle über Ihre serverseitigen Code haben, können Sie die Daten ändern, die wie folgt aussehen zurückgegeben:

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

Sie einfach eine Zeichenfolge verwenden können, Ihr den Namen serverseitige Ressource als source:

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

Schauen Sie sich die remote with JSONP example für ein volles Beispiel einer serverseitigen Ressource verwendet wird.

Edit: Sehen Sie dieses Beispiel für eine funktionierende Demo lokale Daten mit: http://jsfiddle.net/SMxY6/

Answer 2

Sie benötigen eine JSON-Objekt ändern, um die „label“ Eigenschaft zu verwenden. Aus der Dokumentation:

ein Array von Objekten mit Label und Wert Eigenschaften: [{label: "Choice1", Wert: "Wert1"}, ...]

Das Label Eigenschaft wird angezeigt in das Vorschlagsmenü. Der Wert wird in das Eingabeelement eingefügt, nachdem der Benutzer etwas aus dem Menü ausgewählt hat. Wenn nur eine Eigenschaft angegeben ist, wird diese für beide verwendet, z. Wenn Sie nur Werteigenschaften angeben, wird auch der Wert als Bezeichnung verwendet.

Dann müssen Sie die Werte der anderen Textfelder festlegen, wenn die Ereignisse "Ändern" oder "Auswählen" ausgelöst werden.

Answer 3

Nach Stunden der Arbeit .. Schließlich machte es möglich. Thing ist, ich habe ein JSON-Array, bestehend aus vielen JSON-Objekten. Jedes Json-Objekt hat einen Banknamen und seinen ifsc-Code. Der Benutzer musste Bank eingeben und die Bankdetailzeile aus der Datenbank herausfiltern. Nach Auswahl dieser Bank hatte ich 2 Eingabefelder für Bank und andere für ifsc-Code. Ich wähle den Banknamen aus und der entsprechende ifsc-Code wird angezeigt. Das ist also, wie ich es tat -

---

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

}); 
}); 

---

mein json array = [{ label: "State Bank of India", Wert: "SBIN00076" } , { label: "ICICI Bank", Wert: "ICIC001" }, .. ]