jQuery PHP Mysql implementiert die Funktion der Eingabeaufforderungen zur automatischen Vervollständigung

In diesem Artikel wird das Autocomplete-Plug-In von jQuery UI in Kombination mit dem Back-End-PHP verwendet, und die Datenquelle liest die Daten der MySQL-Datentabelle über PHP.

Wir nutzen die Suchfunktion in vielen Projekten, um Benutzern zu helfen, die gewünschten Informationen schneller und genauer zu finden. In diesem Artikel wird erläutert, wie Sie die Funktion der automatischen Eingabeaufforderungen für Benutzereingaben implementieren, genau wie bei den Suchmaschinen Google und Baidu. Wenn der Benutzer ein Schlüsselwort eingibt, wird unter dem Eingabefeld eine Eingabeaufforderung angezeigt, in der Informationen zum Schlüsselwort angezeigt werden Der Benutzer kann auswählen, was das Benutzererlebnis verbessert.

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.

XHTML

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>

jQuery

<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

PHP

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.