jquery phpは検索ボックスの自動prompt_jqueryを実装します

今日、突然このサイトの検索ページを構築して、ユーザーが検索を通じてお気に入りのコンテンツを見つけ、膨大な情報の中からリソースを手動で見つける手間を省きたいと考えています。私の目標は、Baidu のホームページの効果と似ています。ユーザーが検索したいテキストを入力すると、以下に 10 個の関連情報が表示されます。ユーザーがこれら 10 個の情報のいずれかを探している場合は、クリックするだけで新しいページが開きます。主な理由は、ページをよりユーザーフレンドリーにし、ユーザーがより使いやすくするためです。

まずレンダリングを見てみましょう。そうしないと、私が何を言っているのか、どのような効果を実現したいのかがわかりません。

jquery php は検索ボックスの自動プロンプトを実装します

主に原理を説明します:

search.html ページで、ユーザーが検索ボックスに「j」を入力すると、JavaScript を使用して検索ボックスのテキスト コンテンツを取得し、データベース内で関連するコンテンツを検索して返し、その後、JavaScript を使用してサーバーから返された結果を表示します。 検索ボックスの下にあるプロンプト ボックスは、ユーザーが参照を選択するためのものです。

具体的な実装方法:

まず、以下に示すように、ページ上に検索ボックス、検索ボタン、検索プロンプト レイヤーを作成します

ブラウザを使用してページを参照すると、以下に示すような効果が表示されます
jquery php は、ユーザーが検索コンテンツを入力したときに自動プロンプトを実装します
見た目は非常に平凡で、スタイルがありません。次に、スタイルを調整してみましょう

検索プロンプトを表示するレイヤーのスタイルを調整します。検索プロンプトレイヤーは検索ボックスの直下にあるため、その配置方法を絶対配置に設定します。

測位方法*/
次に、JS を使用して検索ボックスの直下に検索プロンプト レイヤーを配置します。ここでは、jQuery を使用してそれを解決します。

検索プロンプト レイヤーの位置と幅は決定されています。ユーザーが検索テキストを入力するまでプロンプト ボックスは表示されないため、最初にプロンプ​​ト ボックスを非表示に設定し、プロンプト レイヤーのスタイルに表示を追加する必要があります。 : 何も隠しません。

これで、検索ボックスの onkeyup のイベントを登録するだけで済みます。jQuery では、keyup を使用します。

上記のクライアントは完成しており、ユーザー入力をサーバーに送信し、サーバーの戻り値に応答することができます。
では、サーバーはクライアントから送信されたデータをどのように処理するのでしょうか?例として PHP を使用してみましょう

これで本当に完全に完成しました。遅延処理やその他のより充実した機能を設定するかどうかについては、以下の意見に返信することもできます。
完全なクライアント コード:

<頭>
<スタイル>
#検索{font-size:14px;}
#検索 .k{パディング:2px 1px;}
#search_auto{ボーダー:1px ソリッド #817FB2; 位置:絶対表示:なし;}
#search_auto li{background:#FFF;}
#search_auto li.cls{text-align:right;}
#search_auto li a{表示:ブロック:5px 6px; カーソル:ポインター;}
#search_auto li a:hover{background:#D8D8D8; text-decoration:none;}

<スクリプト src="jQuery.js">
<スクリプト>
$(関数(){
$('#search_auto').css({'width':$('#search input[name="k"]').width() 4});
$('#search input[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){
if(data=='0') $('#search_auto').html('').css('display','none');
else $('#search_auto').html(data).css('display','block');
});
});
});

完全なサーバー側コード: