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

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

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

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

主に原理を説明します:

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

具体的な実装方法:

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

コードをコピーします コードは次のとおりです:

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

。

コードをコピーします コードは次のとおりです:

#検索{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} /*検索ボックスの幅を大きく設定します*/

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

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

コードをコピーします コードは次のとおりです:

$('#search_auto').css({'width':$('#search input[name="k"]').width() 4});

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

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

コードをコピーします コードは次のとおりです:

$('#search input[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){ //投稿データをサーバー上の search_auto.php に送信します。$.post は jQuery メソッドです
if(data=='0') $('#search_auto').html('').css('display','none'); //サーバー上で返されたデータが 0 に等しいかどうかを判断します。 、これは、関連するコンテンツが見つからないことを意味するため、プロンプト ボックスの内容をクリアして非表示にします
else $('#search_auto').html(data).css('display','block'); //サーバーで返されたデータが 0 に等しくない場合は、返された内容をプロンプト ボックスに入力して表示しますプロンプトボックス
});
});

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

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

$v=$_POST[値];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10"); //クライアントから送信されたデータに基づいて、データベース内の 10 件の関連結果をクエリします
if(mysql_num_rows($re) を返します。 echo '

';
while($ro=mysql_fetch_array($re)) echo '
• '.$ro[title].'
';クエリによって取得された関連結果のタイトル出力に注意する必要があります。jQuery の ajax テクノロジを通じて返されるテキストは UTF-8 でエンコードされているため、$ro[title] に中国語が含まれる場合は、PHP の iconv またはその他の関数を使用する必要があります。 UTF-8 エンコーディングに変換してください。変換しないと、ページに表示される内容は文字化けした文字列になります
echo '
• 閉じる& gt;
'; //ユーザーがプロンプト レイヤーを表示したくないときにクリックして閉じるボタンを入力します。説明するには、このボタンは jQuery を使用します。現在クリックされているのは $(this) です。3 番目の親要素まで移動して非表示にします
echo '

';
?>

これで、サーバーは送信したデータを正しく実行し、対応する結果を返すことができます。テストのために検索ボックスにテキストを入力します。ただし、データベースのコンテンツにこのテキストに関連するものが存在することが前提となります。そうしないと、関連するプロンプト コンテンツがないため、プロンプト ボックスは表示されません (笑)。

しかし、まだ少し欠陥があります。それは、Baidu 検索で見たプロンプト ボックスと比較すると、プロンプト ボックスの内容があまりにも醜いということです。 CSSを使用して

の効果を調整します。

コードをコピーします コードは次のとおりです:

#search_auto li{background:#FFF;} /*プロンプト ボックスに li タグの効果を設定します*/
#search_auto li.cls{text-align:right;} /*プロンプト ボックスに閉じるボタンの効果を設定します*/
#search_auto li a{padding:5px 6px;cursor:pointer; color:#666;} /*プロンプトボックスの li ラベルの下に a ラベル効果を設定します*/
#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*マウスがプロンプト ボックスに移動したときの効果*/

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

コードをコピーします コードは次のとおりです:

#検索{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;}