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

$.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 に等しくない場合は、返された内容をプロンプト ボックスに入力して表示しますプロンプトボックス
});
});

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

#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;}

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

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

';
while($ro=mysql_fetch_array($re)) echo '
• '.$ro[title].'
';
echo '
• 閉じる';
  echo '