Implementierung der automatischen Vervollständigung zum automatischen Ausfüllen von Formularen basierend auf Bootstrap-Plug-in_Javascript-Kenntnissen

Basierend auf dem Bootstrap-Plugin vervollständigt die automatische Vervollständigung das Formular und stellt Skriptcode, Anwendungsfälle und Backend-Server (PHP) bereit. Es gibt einige Dinge, die im Originaltext nicht klar sind .

Zunächst müssen Sie bootstrap&jquery laden. Was einer weiteren Erklärung bedarf, ist, dass das vom Backend zurückgegebene zweidimensionale Array mit dem Aufruf unterhalb der formatItem-Methode übereinstimmen sollte;
Darüber hinaus müssen die zurückgegebenen Daten zuerst parseJSON sein!

Zugehörige Parameterbeschreibung:

Quelle: Funktion(Abfrage,Prozess){}. Die Abfrage stellt die Zeichenfolge im aktuellen Texteingabefeld dar. Bei dieser Methode können Sie Daten (JSON-Objekt in Form eines Arrays) über Ajax aus dem Hintergrund anfordern und dann das zurückgegebene Objekt als Parameter des Prozesses verwenden >
formatItem: function(item){}. Konvertieren Sie ein bestimmtes JSON-Objekt der zurückgegebenen Daten in ein String-Format, das in der Eingabeaufforderungsliste angezeigt wird: string;
setValue: function(item){}. Wenn ein Element in der Eingabeaufforderungsliste ausgewählt wird, legen Sie den im Texteingabefeld angezeigten Wert und den tatsächlich zu erhaltenden Wert fest. Rückgabewertformat: {'data-value':item["Das Artikelattribut des im Eingabefeld angezeigten Werts"],'real-value':item["Das Artikelattribut des tatsächlichen Werts, der abgerufen werden muss" ]}, das später über das Texteingabefeld verwendet werden kann. Das Realwertattribut erhält den Wert
Elemente: Die maximale Anzahl von Ergebnissätzen für Eingabeaufforderungen zur automatischen Vervollständigung, Standard: 8; minLength:
Der Abgleich wird nur durchgeführt, wenn die Zeichenfolge im aktuellen Texteingabefeld diesen Attributwert erreicht: Verzögerung:
Geben Sie die Anzahl der Millisekunden an, bevor tatsächlich Daten aus dem Hintergrund angefordert werden, um häufige Anforderungen an den Hintergrund zu verhindern, die durch zu schnelle Eingaben verursacht werden. Implementieren Sie die automatische Vervollständigung, um das Formular basierend auf dem Bootstrap-Plug-in automatisch auszufüllen. Der Code lautet wie folgt

1. Code

2. $data ist ein zweidimensionales Array

<script>
$('#sim_iccid').autocomplete({
 source:function(query,process){
  var matchCount = this.options.items;//允许返回结果集最大数量
  $.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){
   respData = $.parseJSON(respData);//解析返回的数据
   return process(respData);
  });
 },
 formatItem:function(item){
  return item["iccid"]+"("+item["mobile"]+")";
 },
 setValue:function(item){
  return {'data-value':item["iccid"],'real-value':item["mobile"]};
 }
});
</script>

echo json_encode( $data )

3. Standard-JSON-Format, das zurückgegeben werden muss

🎜

Bootstrap-Autovervollständigungssteuerung Autocomplete

basiert auf Bootstraps eigenem Steuerelement Typeahead, da Typeahead keine komplexen Objekte unterstützt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.