jQuery+PHP+Mysqlで入力自動補完プロンプトの機能を実現

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

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

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

XHTML

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

リーリー

jQuery ui プラグインは、公式 Web サイトからダウンロードできます: www.jqueryui.com

次に、本文に入力ボックスを書きます。

リーリー

jQuery

リーリー

オートコンプリートプラグインを呼び出すと、データソースがsearch.phpから来ていることが一目でわかります。ユーザーが1文字を入力すると、データソースが呼び出されます。オートコンプリート プラグインは、いくつかの構成可能なパラメーターを提供します。

disabled: ページのロード後に無効にするかどうか。デフォルトは false です。これを true に設定する必要はありません。

appendTo: 入力中にドロップダウン プロンプト ボックスに要素を追加します。デフォルトは「body」です。

autoFocus: デフォルトは false で、true に設定すると、最初のドロップダウン プロンプト ボックスが選択されます。

遅延: データをロードするときの遅延時間。デフォルトはミリ秒単位で 300 です。

minLength: 文字数を入力すると、ドロップダウン プロンプトが表示されます。デフォルトは 1 です。

position: ドロップダウン プロンプト ボックスの位置を定義します。

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

autocomplete には多くのイベントとメソッドも用意されています。詳細については、公式 Web サイトを参照してください: http://jqueryui.com/demos/autocomplete

PHP

オートコンプリート プラグインを呼び出した後は、データ ソースを呼び出す必要があるため、まだプロンプト効果はありません。

まずテーブルが必要で、テーブルに適切な量のデータを追加します。テーブルの構造は次のとおりです。

リーリー

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

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

リーリー

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

リーリー

この時点で、もう一度入力をテストして、必要な効果が得られますか?

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

リーリー

上記は、入力自動補完プロンプトを実現するための jQuery+PHP+Mysql の機能を、関連する内容も含めて紹介しており、PHP チュートリアルに興味のある友人に役立つことを願っています。