検索プロンプト関数の php+jquery 実装 example_PHP チュートリアル-PHPチュートリアル-php.cn

Baidu または Google を使用している友人は、単語を入力する限り、関連する検索エンジンをインテリジェントに表示してくれることがわかります。今日は仕事の必要があるため、このタイプの機能を実行する必要があります。 jquery を使用してユーザー入力を実装する 2 つの方法の例は、コンテンツを検索するときに自動的に表示されます。

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

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

主に原理を説明します:

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

具体的な実装方法:

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

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

ブラウザを使用してページを参照すると、以下に示すような効果が表示されます

見た目は非常に普通で、スタイルがありません。次に、スタイルを調整してみましょう。

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


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

'.$ro[title].'

閉じる'; //ユーザーがプロンプトレイヤーを表示したくないときにクリックして閉じることができるように、閉じるボタンを入力します。説明すると、現在クリックされているボタンは $(this) です。一番上まで移動して 3 番目の親要素を見つけ、徐々に消していきます
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;} /*マウスがプロンプトボックスに移動したときの効果*/

コードは次のとおりです

コードをコピー

<頭>
<スタイル>
#検索{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{背景:#D8D8D8; テキスト装飾:#000;}

jquery+php は、ユーザーが検索コンテンツを入力したときに自動プロンプトを実現します

gt;

<スクリプト>
$(関数(){

$('#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');
});
});

});

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

コードは次のとおりです

コードをコピー

$v=$_POST[値];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10");
if(mysql_num_rows($re) echo '