PHPはjQuery.atocompletteeプラグインと結合して、入力自動完了ヒントの機能を実現します。

私たちは多くの項目で検索機能を使って、ユーザーがより速く、より正確に欲しい情報を見つけるのを助けます。この記事では、ユーザーが自動的に提示する機能を入力する方法を紹介します。GoogleのBaidu検索エンジンのように、ユーザーがキーワードを入力すると、入力ボックスの下にヒントがあり、キーワードに関する情報をユーザーが選択できるように表示し、ユーザーの体験を向上させます。
本論文では、jquery uiのautomipeteプラグインを使用し、バックエンドのPHPと結合して、データソースはPHPを通じてmysqlデータテーブルのデータを読み出す。

XHTML
まずjqueryライブラリと関連するuiプラグイン、cssを導入します。

<link rel="stylesheet" href="jquery.ui.autocomplete.css"/> 

<script type="text/javascript" src="js/jquery.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.core.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.widget.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.position.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script> 

jQuery uiプラグインは公式サイトからダウンロードできます。
次にbodyに入力ボックスを書きます。

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

jQuery

$(function(){ 

    $("#key").autocomplete({ 

        source: "search.php", 

        minLength: 2 

    }); 

}); 

一見してわかるように、aut completteプラグインを呼び出して、データソースはsearch.phpから来て、ユーザが1文字を入力するとデータソースを呼び出します。atocomploteプラグインはいくつかの構成可能なパラメータを提供しています。
disabled：ページにロードしても使えないか、デフォルトはfalseです。これはtrueに設定する必要がありません。あまり意味がありません。
apendTo：入力時にドロップするヒントボックスに要素を追加し、デフォルトは「body」です。
aut Focus：デフォルトはfalseで、trueに設定すると、ドロップダウンヒントボックスの最初の一つが選択された状態になります。
delay：データ読み込み時の遅延時間は、デフォルトでは300ミリ秒単位です。
minLength：どれぐらいの文字を入力するとドロップダウンが表示されますか？デフォルトは1です。
position：ドロップダウンヒントボックスの位置を定義します。
source：データソースを定義し、データソースはjson形式でなければなりません。本例はsearch.phpを要求して取得したデータソースです。
autocompleeteはまた、多くのイベントと方法を提供しています。詳細はその公式サイトをご覧ください。
PHP
automipeteプラグインを起動した後、まだ効果を提示していません。データソースを呼び出す必要があるので、あせらないでください。
まず私達は表を必要とし、表に適量のデータを追加します。表の構造は以下の通りです。

CREATE TABLE `art` ( 
 `id` int(11) NOT NULL auto_increment, 
 `title` varchar(100) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8 ;

 
自分で表を作って、表artにデータを追加してください。
search.phpはMysqlデータベースに接続することを実現し、先端ユーザの入力に従ってデータテーブルにマッチするコンテンツを検索して取得し、JSON形式で出力する。

include_once("connect.php"); //      
 
$q = strtolower($_GET["term"]); //          
$query=mysql_query("select * from art where title like '$q%' limit 0,10"); 
//     ，          
while ($row=mysql_fetch_array($query)) { 
  $result[] = array( 
    'id' => $row['id'], 
    'label' => $row['title'] 
  ); 
} 
echo json_encode($result); //  JSON   

最後の出力のJSONデータフォーマットは以下の通りです。

[{"id":"3","title":"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b 

\u62c9\u9009\u9879\u83dc\u5355"}, 

{"id":"4","title":"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370 

\u533a\u57df"}] 

この時、入力をもう一度テストしてみます。あなたが望む効果が見えますか？
最後に、aut compleeteプラグインはfirefoxにBUGを入力していますが、入力後は提示できません。前のスペースにもう一度チェックしてください。オンラインでは多くの学生が解決策を提示していますが、最新のautomipeteプラグインのコードの外観は再現されています。私の解決方法は133行に下記のコードを追加します。

.bind("input.autocomplete",function(){ 
  //  FF     bug 
  self.search(self.item); 
}); 

以上述べましたが、本文の内容は全部です。お好きになってください。