PHP は jQuery.autocomplete プラグインを組み合わせて入力オートコンプリート プロンプトの機能を実装します_PHP チュートリアル

PHP は jQuery.autocomplete プラグインと組み合わせて、自動補完プロンプトを入力する機能を実現します

私たちは、ユーザーが必要な情報をより速く、より正確に見つけられるように、多くのプロジェクトで検索機能を使用しています。この記事では、Google や Baidu の検索エンジンと同様に、ユーザーがキーワードを入力すると、入力ボックスの下にそのキーワードに関連する情報を表示するプロンプトが表示される機能を実装する方法を紹介します。ユーザーが選択できるため、ユーザー エクスペリエンスが向上します。

この記事では、jquery ui のオートコンプリート プラグインをバックエンド PHP と組み合わせて使用​​し、データ ソースは PHP を通じて mysql データ テーブルのデータを読み取ります。

XHTML

まず、jquery ライブラリ、関連する ui プラグイン、および CSS をインポートします。

コードは次のとおりです:

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

コードは次のとおりです:

jQuery

コードは次のとおりです:

$(関数(){

$("#key").autocomplete({

ソース: "search.php"、

最小長さ: 2

}); });

オートコンプリートプラグインを呼び出すと、ユーザーが1文字を入力するとデータソースが呼び出されることがわかります。オートコンプリート プラグインは、いくつかの構成可能なパラメーターを提供します:
無効: ページのロード後に使用できないかどうか。デフォルトは false です。これを true に設定する必要はありません。
appendTo: 入力中にドロップダウン プロンプト ボックスに要素を追加します。デフォルトは「body」です。
autoFocus: デフォルトは false です。true に設定すると、最初のドロップダウン プロンプト ボックスが選択されます。
遅延: データをロードするときの遅延時間。デフォルトはミリ秒単位の 300 です。
minLength: 文字数を入力すると、ドロップダウン プロンプトが表示されます。デフォルトは 1 です。 位置: ドロップダウン プロンプト ボックスの位置を定義します。

ソース: データ ソースを定義します。この例では、データ ソースは search.php をリクエストすることで取得されます。

autocomplete には多くのイベントとメソッドも用意されています。詳細については、公式 Web サイトを確認してください:

PHP

オートコンプリート プラグインを呼び出した後は、データ ソースを呼び出す必要があるため、まだプロンプト効果はありません。
まずテーブルが必要で、テーブルに適切な量のデータを追加します。テーブルの構造は次のとおりです。



?

1

2

3

45

テーブル「アート」を作成 (

`id` int(11) NOT NULL auto_increment,

`title` varchar(100) NOT NULL,

主キー (`id`)

) ENGINE=MyISAM デフォルト CHARSET=utf8 ;

ご自身でテーブルを作成し、テーブルアートにデータを追加してください。

search.php は Mysql データベースへの接続を実装し、フロントエンド ユーザーの入力に基づいてデータ テーブル内の一致するコンテンツをクエリして取得し、JSON 形式で出力します。

?

1 2 3 4 5 6 7 8 9 10 11 12

include_once("connect.php") //データベースに接続します $q = strto lower($_GET["term"]) //ユーザーが入力した内容を取得します $query=mysql_query("select * from art where title like '$q%' limit 0,10"); //データベースにクエリを実行し、結果セットを配列に形成します while ($row=mysql_fetch_array($query)) { $result[] = 配列( 'id' => $row['id'], 'ラベル' => $row['タイトル'] ); } echo json_encode($result) //JSONデータを出力します

最終的な出力 JSON データ形式は次のとおりです:

コードは次のとおりです:

[{"id":"3","title":"u4f7fu7528CSSu548cjQueryu5236u4f5cu6f02u4eaeu7684u4e0b
u62c9u9009u9879u83dcu5355"}、
{"id":"4","title":"u4f7fu7528jQueryu548cCSSu63a7u5236u9875u9762u6253u5370
u533au57df"}]

この時点で、もう一度入力をテストして、必要な効果が得られますか?
最後に、Firefox のオートコンプリート プラグインには入力のバグがあることに注意してください。入力後にプロンプ​​トを表示するには、スペースを入力してからバックスペースを入力する必要があります。インターネット上の多くの学生が解決策を提供していますが、最新のオートコンプリート プラグイン コードは再構成されており、133 行目に次のコードを追加するのが私の解決策です。

?

1 2 3 4

.bind("input.autocomplete",function(){ //FFが中国語をサポートしていないバグを修正 self.search(self.item); });

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

http://www.bkjia.com/PHPjc/990985.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/990985.html技術記事 PHP は jQuery.autocomplete プラグインと組み合わせて、入力オートコンプリート プロンプトの機能を実現し、ユーザーが必要な情報をより迅速かつ正確に見つけられるように、多くのプロジェクトで検索機能を使用しています。この記事は...