In diesem Artikel wird das Autocomplete-Plug-In von jQuery UI in Kombination mit Back-End-PHP verwendet, und die Datenquelle liest die Daten der MySQL-Datentabelle über PHP.
Importieren Sie zunächst die JQuery-Bibliothek und die zugehörigen UI-Plug-Ins sowie CSS.
<code> <span><link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"jquery.ui.autocomplete.css"</span><span>/></span> <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"js/jquery.js"</span><span>></span><span></script></span> <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.core.js"</span><span>></span><span></script></span> <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.widget.js"</span><span>></span><span></script></span> <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.position.js"</span><span>></span><span></script></span> <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.autocomplete.js"</span><span>></span><span></script></span> </code>
Das jQuery-UI-Plug-in kann von der offiziellen Website heruntergeladen werden: www.jqueryui.com
Schreiben Sie dann ein Eingabefeld in den Textkörper:
<code> <span><input</span> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"key"</span> <span>name</span>=<span>"key"</span> <span>/></span> </code>
<code>
$(<span>function</span>()<span>{</span>
$(<span>"#key"</span>).autocomplete(<span>{</span>
source: <span>"search.php"</span>,
minLength: <span>2</span>
<span>}</span>); <span>}</span>); </code>Sie können auf einen Blick verstehen, dass die Datenquelle beim Aufruf des Autovervollständigungs-Plugins aus search.php stammt. Wenn der Benutzer 1 Zeichen eingibt, wird die Datenquelle aufgerufen. Das Autocomplte-Plugin bietet mehrere konfigurierbare Parameter:
disabled: Ob es nach dem Laden der Seite deaktiviert ist. Es ist nicht nötig, dies auf true zu setzen.
appendTo: Elemente während der Eingabe an das Dropdown-Eingabeaufforderungsfeld anhängen, der Standardwert ist „body“.
AutoFocus: Der Standardwert ist „false“. Wenn er auf „true“ gesetzt ist, wird das erste Dropdown-Eingabeaufforderungsfeld ausgewählt.
Verzögerung: Die Verzögerungszeit beim Laden von Daten, der Standardwert ist 300, in Millisekunden.
minLength: Wenn Sie die Anzahl der Zeichen eingeben, wird eine Dropdown-Eingabeaufforderung angezeigt. Der Standardwert ist 1.
Position: Definieren Sie die Position des Dropdown-Eingabeaufforderungsfelds.
Quelle: Definieren Sie die Datenquelle. In diesem Beispiel wird die Datenquelle durch Anfordern von search.php abgerufen.
Autocomplete bietet auch viele Ereignisse und Methoden. Weitere Informationen finden Sie auf der offiziellen Website: http://jqueryui.com/demos/autocomplete
Nach dem Aufruf des Autocomplete-Plug-Ins gibt es noch keine sofortige Wirkung. Machen Sie sich keine Sorgen, denn Sie müssen die Datenquelle aufrufen.
Zuerst benötigen wir eine Tabelle und fügen der Tabelle eine entsprechende Datenmenge hinzu. Die Struktur der Tabelle ist wie folgt:
<code> CREATE TABLE `art` ( `id` int(<span>11</span>) NOT <span>NULL</span> auto_increment, `title` varchar(<span>100</span>) NOT <span>NULL</span>, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 ; </code>
Bitte erstellen Sie selbst eine Tabelle und fügen Sie der Tabellengrafik Daten hinzu.
search.php implementiert die Verbindung zur MySQL-Datenbank und fragt basierend auf den Eingaben des Front-End-Benutzers passende Inhalte in der Datentabelle ab, ruft diese ab und gibt sie dann im JSON-Format aus.
<code> <span>include_once</span>(<span>"connect.php"</span>); <span>//连接数据库</span>
<span>$</span><span>q</span> = strtolower(<span>$_GET</span>[<span>"term"</span>]); <span>//获取用户输入的内容</span> <span>$</span><span>query</span>=mysql_query(<span>"select * from art where title like '$q%' limit 0,10"</span>); <span>//查询数据库，并将结果集组成数组</span> <span>while</span> (<span>$</span><span>row</span>=mysql_fetch_array(<span>$</span><span>query</span>)) {
<span>$</span><span>result</span>[] = <span>array</span>(
<span>'id'</span> => <span>$</span><span>row</span>[<span>'id'</span>],
<span>'label'</span> => <span>$</span><span>row</span>[<span>'title'</span>]
);
} <span>echo</span> json_encode(<span>$</span><span>result</span>); <span>//输出JSON数据</span> </code>Das endgültige JSON-Ausgabedatenformat ist:
<code>
[<span>{</span><span>"id"</span>:<span>"3"</span>,<span>"title"</span>:"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b
\u62c9\u9009\u9879\u83dc\u5355"<span>}</span>, <span>{</span><span>"id"</span>:<span>"4"</span>,<span>"title"</span>:"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370
\u533a\u57df"<span>}</span>] </code>Testen Sie zu diesem Zeitpunkt die Eingabe erneut. Sehen Sie den gewünschten Effekt?
Abschließend ist zu erwähnen, dass das Autocomplete-Plugin in Firefox einen Eingabefehler aufweist. Nach der Eingabe müssen Sie die Leertaste vorwärts und dann die Rücktaste drücken. Viele Studenten im Internet haben Lösungen angegeben, aber der neueste Autovervollständigungs-Plug-in-Code wurde umstrukturiert. Meine Lösung besteht darin, den folgenden Code zu Zeile 133 hinzuzufügen:
<code>
.bind(<span>"input.autocomplete"</span>,<span>function</span>()<span>{</span>
<span>//修复FF不支持中文bug</span>
self.search(self.item); <span>}</span>); </code>
Das Obige stellt die Funktion von jQuery PHP Mysql vor, um Eingabeaufforderungen zur automatischen Vervollständigung zu realisieren, einschließlich der relevanten Inhalte. Ich hoffe, dass es für Freunde hilfreich ist, die an PHP-Tutorials interessiert sind.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
