Basierend auf dem Bootstrap-Plug-In wird automatisch die Formulare automatisch vervollständigt und Skriptcode, Anwendungsfälle und Hintergrundserver (PHP) enthält. Es gibt einige Dinge, die im Originaltext nicht klar erklärt werden, und ich hoffe, dass es allen helfen kann.
Zunächst muss ich Bootstrap & JQuery laden. Es ist zu beachten, dass das vom Backend zurückgegebene zweidimensionale Array mit dem Anruf unterhalb der Formatitem-Methode übereinstimmt.
Darüber hinaus müssen die zurückgegebenen Daten zuerst Parsejson sein! Erinnern.
Verwandte Parameterbeschreibung:
Quelle: Funktion (Abfrage, Prozess) {}. Die Abfrage repräsentiert die Zeichenfolge im aktuellen Texteingangsfeld. In dieser Methode können Daten aus dem Hintergrund (ein JSON -Objekt in Form eines Arrays) über AJAX angefordert werden, und dann wird das zurückgegebene Objekt als Parameter des Prozesses verwendet.
FormatItem: Funktion (Element) {}. Das spezifische JSON -Objekt, das die Daten zurückgibt, wird in ein String -Format konvertiert, mit dem sie in der Aufforderungsliste angezeigt werden, und der Rückgabewert ist: String;
setValue: function (item) {}. Wenn ein Element in der Aufforderungsliste ausgewählt ist, legen Sie den im Texteingangsfeld angezeigten Wert und den Wert fest, der tatsächlich erhalten werden muss. Rückgabewertformat: {'Datenwert': item ["Element Eigenschaft des im Eingangsfelds angezeigten Werts"], 'Real-Wert': item ["Elementeigenschaft des tatsächlichen Werts, der erhalten werden muss"]}, später kann dieser Wert über die reale Eigenschaft des Texteingangsfeldes erhalten werden.
Elemente: Die maximale Anzahl der Ergebnissätze für automatische Abschlussanforderungen, Standardeinstellung: 8;
Minlength: Der Übereinstimmungsprozess wird nur ausgeführt, wenn die Zeichenfolge im aktuellen Texteingangsfeld den Eigenschaftswert erreicht. Standard: 1;
Verzögerung: Nach Angabe der Anzahl der Verzögerungs -Millisekunden werden Daten vom Hintergrund angefordert, um zu verhindern, dass häufige Anforderungen aus dem Hintergrund häufig durch schnelle Eingabe verursacht werden. Standard: 500
Basierend auf dem Bootstrap-Plug-In, automatisch ausfüllen, ist der Code wie folgt automatisch auszufüllen.
1. Code
<Script> $ ('#SIM_ICCID'). AutoComplete ({Quelle: Funktion (Abfrage, Prozess) {var matchCount = this.options.Items; // Die maximale Anzahl der zulässigen Ergebnisse ist zulässig. $ .get ("http://www.soyiyuan.com/update/", {"iccid": query, "matchCount": matchCount}, function (respdata) {respdata = $ .Parsejson (Respdata); item ["ICCID"]+"("+item ["mobile"]+")";2. $ Data ist ein zweidimensionales Array
echo json_encode ($ data)
3. Das Standard -JSON -Format, das zurückgegeben werden muss
[Code] [{"ICCID": "12345678901234567890", "Mobile": "1850000"}, {"ICCID": "12345785", "Mobile": "1850001"}] [Code] [Code] [Code] [Code]
Bootstrap AutoComplete Control AutoComplete wird basierend auf den eigenen Steuerungssteuerheads des Bootstraps transformiert, da die TypeA -Hauptdienste keine komplexen Objekte unterstützt.
//The sample code is as follows: $('#autocompleteInput').autocomplete({ source:function(query,process){ var matchCount = this.options.items;//Return the maximum number of result sets $.post("/bootstrap/region",{"matchInfo":query,"matchCount":matchCount},function(respData){ return prozess (respdata);}); {'Data-value': item ["RegionName"], 'Real-value': item ["RegionCode"]}; $ ("#goBtn"). click (function () {// den tatsächlichen Wert des Textfelds var RegionCode = $ ("#autocompleteInput"). Attr ("Real-Value") || ""; Alert (RegionCode);});Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.