Baidu または Google を使用している友人は、単語を入力する限り、関連する検索エンジンをインテリジェントに表示してくれることがわかります。今日は仕事の必要があるため、このタイプの機能を実行する必要があります。 jquery を使用してユーザー入力を実装する 2 つの方法の例は、コンテンツを検索するときに自動的に表示されます。
今日、私は突然このサイトの検索ページを作成して、ユーザーが検索を通じてお気に入りのコンテンツを見つけ、膨大な情報の中からリソースを手動で見つける手間を省きたいと思いました。私の目標は、Baidu のホームページの効果と似ています。ユーザーがテキストを検索する場合、以下に 10 個の関連情報が表示されます。ユーザーがこれら 10 個の情報のいずれかを探している場合、クリックするだけで新しいページが開きます。より使いやすく、より使いやすくするためのワンポイントです。
まずレンダリングを見てみましょう。そうしないと、私が何を言っているのか、どのような効果を実現したいのかがわかりません。
主に原理を説明します:
search.html ページで、ユーザーが検索ボックスに「j」を入力すると、JavaScript を使用して検索ボックスのテキスト コンテンツを取得し、データベース内で関連するコンテンツを検索して返し、JavaScript を使用してサーバーによって返された結果が検索ボックスに表示されます。以下のプロンプト ボックスは、ユーザーが参照を選択するためのものです。
具体的な実装方法:
まず、以下に示すように、ページ上に検索ボックス、検索ボタン、検索プロンプトレイヤーを作成します
ブラウザを使用してページを参照すると、以下に示すような効果が表示されます
見た目は非常に普通で、スタイルがありません。次に、スタイルを調整してみましょう。
コードは次のとおりです|
| コードをコピー
|
| #検索{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} /*検索ボックスの幅を大きく設定します*/
|
検索プロンプトを表示するレイヤーのスタイルを調整します。検索プロンプトレイヤーは検索ボックスの直下にあるため、その配置方法を絶対配置に設定します。
コードは次のとおりです
| コードをコピー |
|
#search_auto{border:1px Solid #817FB2; Position:absolute;} /*境界線と配置方法を設定します*/|
|
次に、JS を使用して検索ボックスの直下に検索プロンプト レイヤーを配置します。幅は検索ボックスと同じになります。ここでは jQuery を使用して解決します。
コードは次のとおりです
コードをコピー|
|
|
$(‘#search_auto’).css({‘width’:$(‘#search input[name="k"]‘).width()+4});
|
検索プロンプト レイヤーの位置と幅は決定されています。ユーザーが検索テキストを入力するまでプロンプト ボックスは表示されないため、最初にプロンプト ボックスを非表示に設定し、プロンプト レイヤーのスタイルに display:none を追加する必要があります。それは隠されています。
これで、検索ボックスの onkeyup のイベントを登録するだけで済みます。jQuery では、それを処理するのに keyup を使用します。
コードは次のとおりです|
| コードをコピー
|
| $('#検索入力[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)<=0) exit('0'); //クエリ結果が無い場合は直接0を返す
echo '';
?>
|
これで、サーバーは送信したデータを正しく実行し、対応する結果を返すことができます。テストするには、検索ボックスにテキストを入力します。ただし、データベース内にこのテキストに関連するコンテンツが存在することが前提となります。関連するプロンプト コンテンツがないため、プロンプト ボックスが表示されません (笑)。
しかし、まだ少し欠陥があります。つまり、Baidu 検索で見たプロンプト ボックスと比較すると、プロンプト ボックスの内容があまりにも醜いのです。CSS を使用します。表示効果を調整します
コードは次のとおりです|
| コードをコピー
|
| #search_auto li{background:#FFF; text-align:left;} /*プロンプト ボックスに li タグの効果を設定します*/
#search_auto li.cls{text-align:right;} /*プロンプト ボックスに閉じるボタンの効果を設定します*/
#search_auto li a{padding:5px 6px;cursor:pointer; color:#666;} /*プロンプトボックスの li ラベルの下にラベル効果を設定します*/
#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*マウスがプロンプト ボックスに移動したときの効果*/
|
これで制作は完全に完了しました。遅延処理やその他のより充実した機能を設定するかどうかについては、以下の意見に返信することもできます。
完全なクライアントコード:
|
