PHP+JS を使用して自動検索プロンプトを実装する (例)_PHP チュートリアル

私がこのチュートリアルを書く必要性を感じたのは、私がこれまでに見たオートコンプリート アプリケーションのほとんどが、プログラムのソース コード パッケージを提供して、それがどのように機能するのか、なぜ行うのかを説明するのではなく、その使用方法を説明するだけだからです。これを理解すると、このプラグインを独自のニーズに合わせてさらにカスタマイズできるようになります。

さて、始めましょう。 JavaScript コード:

コードをコピーします コードは次のとおりです: function lookup(inputString) { if(inputString.length == 0) { // 提案ボックスを非表示にします。 $('#suggestions '). Hide(); } else { #suggestions').show(); String' ).val(thisValue); $('#suggestions').hide(); }

JS の説明:

さて、上記のコードからわかるように、すべての操作を処理する rpc.php というファイルに接続する必要があります。 lookup 関数は、テキスト入力ボックスから取得した単語を使用し、jQuery の Ajax メソッド POST を使用してそれを rpc.php に渡します。 入力文字 'inputString' が '0' (ゼロ、翻訳者の注釈: ここでは検索ボックスに何も入力しないことを指します) の場合、これも非常にユーザーフレンドリーです。検索ボックス 何も入力していないため、提案ボックスが表示されることを期待していません。 入力ボックスにコンテンツがある場合は、「inputString」を取得して rpc.php ページに渡し、次に次のように jQuery の $.post() 関数が使用されます: $.post(url, [data ]、[コールバック]) 「コールバック」部分は関数に関連付けることができます。これは、データ（データ）が正常にロードされた場合にのみ実行されます。（注釈：これは意訳です。元のテキストが理解できません: If 返されたデータが空でない場合 (つまり、表示するものがある場合)、検索プロンプト ボックスを表示し、返されたデータを使用してその中の HTML コードを置き換えます。 とても簡単です！ PHP バックグラウンド プログラム (rpc.php):

ご存知のとおり、私の PHP バックグラウンド プログラムは rpc.php (RPC はリモート プロシージャ コールを指します) と呼ばれており、実際に実行する関数にちなんで名付けられたのではありませんが、悪くない。

コードをコピーします コードは次のとおりです: // PHP5 実装 - MySQLi を使用します。 $db = new mysqli('localhost', 'root' ,”, 'autoComplete'); if(!$db) { // 接続できない場合はエラーを表示します。 echo 'エラー: データベースに接続できませんでした。'; } else { // 投稿されたクエリ文字列はありますか? if(isset($_POST['queryString'])) { $queryString = $_POST[ 'queryString']; // 文字列の長さは 0 より大きいですか? if(strlen($queryString) >0) { // クエリを実行します: LIKE '$queryString%' を使用します // パーセント記号はワイルドカードです。国の例では次のように機能します… // $queryString = 'Uni'; // 返されるデータ = 'United States, United Kingdom'; $query = $db->query ("SELECT value FROM country WHERE value LIKE '$queryString%' LIMIT 10"); if($query) { // 結果がある間、それらをループします - オブジェクトを取得します (ちなみに私は PHP5 が好きです!)。 while ($result = $query ->fetch_object()) { // を使用して結果をフォーマットします。リストの場合は変更できます。 // onClick 関数はテキストボックスに結果を入力します。 echo ' value.'');">'.$result->value. ' '; } } else { echo 'エラー: クエリに問題がありました。'; } } else { // 何もしません。 } // queryString があります. } else { echo 'このスクリプトに直接アクセスすることはできません!'; } } ?> PHP代码解释 ： 鉴中我已经追加很多注释，在这里在这里这里就不不再再说的详细详细详细了。 一般下、需要这个 '' Querystring '然后然后然后在然后在使用通配符通配符一个このような手順を実行すると、MYSQL が使用できなくなる可能性があります。ただし、この手順は、より小さなレベルのアプリケーションに適用するのに問題はありません。このセグメントphp代码你必要在自己システム内の変更は、'$query' を自分のデータベースに更新する必要がある場合など、ここに公開されているデータ テーブルの列名などを参照する必要があります。これは非常に優れた機能ですが、Firefox または Safari ブラウザでは機能制限がある場合があります。 .suggestionsBox { 位置: 相対; 左: 30px; マージン: 10px 0px 0px 0px; 幅: 200px; 背景色: #212427; -moz-border-radius: 7px; -webkit-境界線-半径：7px; border：2px solid＃000; 色：#fff; }} suggestionlist { margin：0px;パディング: 3px; カーソル: ポインター; } .suggestionList li:hover { 背景色: #659CD8; }

CSS コードは非常に標準的なもので、特に指摘する必要はありません。 メインファイルのHTML: これはメインファイルのHTMLコードの一部です。追加する必要があるのは、入力ボックスを追加し、「onkeyup」関数をlookup(this.value)に設定することだけです。また、上記の Javascript コードを変更したくない場合は、ID を変更しないことをお勧めします。 スクリーンショット: 最終的な効果がどのようなものになるか見てみたいと思います。

また、

最後は便利なリンクです。長い間楽しみにしていたと思います。 ソースファイル : クリックしてダウンロード

http://www.bkjia.com/PHPjc/327517.html www.bkjia.com true http://www.bkjia.com/PHPjc/327517.html 技術記事 私がこのチュートリアルを書く必要性を感じたのは、私がこれまでに見たオートコンプリート アプリケーションのほとんどが、ユーザーに説明するのではなく、プログラム ソース コード パッケージを提供して、その使用方法を説明するだけだからです...