jquery+php は、ユーザーが検索を入力したときに自動プロンプトを実装します。 content_PHP チュートリアル
- WBOYオリジナル
- 2016-07-13 17:42:53898ブラウズ
今日、私は突然このサイトの検索ページを作成して、ユーザーが検索を通じてお気に入りのコンテンツを見つけられるようにし、膨大な情報の中からリソースを手動で見つける手間を省きたいと思いました。私の目標は、Baidu ホームページの効果と似ています。ユーザーが検索するテキストを入力すると、以下に関連する 10 個の情報が表示されます。ユーザーがこれら 10 個の情報のいずれかを探している場合は、クリックするだけで新しいページが開きます。主な理由は、ユーザーがより使いやすくするためです。
まずレンダリングを見てみましょう。そうしないと、私が何を言っているのか、どのような効果を実現したいのかがわかりません。
以下は主に原理を説明します:
search.html ページでは、ユーザーが検索ボックスに「j」を入力すると、JavaScript を使用して検索ボックスのテキスト コンテンツを取得し、データベース内で関連するコンテンツを検索して返し、その後、JavaScript を使用してサーバーによって返された結果が検索ボックスに表示されます。以下のプロンプト ボックスは、ユーザーが参照を選択するためのものです。
具体的な実装方法:
まず、以下に示すように、ページ上に検索ボックス、検索ボタン、検索プロンプト レイヤーを作成します
<div id="検索">
<br>
<input type="text" name="k" class="k"> <input type="button" name="s" value="検索"><br>
</div>
<br>
<div id="search_auto"></div>
ブラウザを使用してページを参照すると、以下に示すような効果が表示されます
見た目は非常に普通で、スタイルがありません。次に、スタイルを調整してみましょう。
#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} /*検索ボックスの幅を大きく設定します*/<br>
#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 に等しくない場合、返された内容をプロンプト ボックスに入力してプロンプト ボックスを表示します<br>
});<br>
});<br><br>
<br> 上記のクライアントは完成しており、ユーザー入力をサーバーに送信し、サーバーの戻り値に応答することができます。
それでは、サーバーはクライアントから送信されたデータをどのように処理するのでしょうか？PHPを例にしてみましょう
<?php <br />
$v=$_POST[値];<br>
$re=mysql_query("select * from test where title like %$v% order by addtime desc limit 10"); //クライアントから送信されたデータに基づいて、データベース内の 10 件の関連結果をクエリします<br>
if(mysql_num_rows($re)
エコー <ul>;<br>
while($ro=mysql_fetch_array($re)) echo <li><a href="">.$ro[title].</a></li>; 結果のタイトル出力が必要です。ここで注意すべき点は、jQuery の ajax テクノロジを通じて返されるテキストは UTF-8 エンコードであるため、$ro[title] に中国語が含まれる場合は、PHP の iconv またはその他の関数を使用して UTF-8 エンコードに変換することを忘れないでください。ページ上に文字化けの文字列が表示されます<br>
echo <li class="cls"><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)">閉じる //ユーザーがプロンプト レイヤーを表示したくないときにクリックして閉じることができるように、閉じるボタンを入力します。説明すると、現在クリックされているボタンは $ です。 (これ)、3 番目の親要素を見つけてフェードアウトします<br>
エコー </a></li>
</ul>;<br>
?>
これで、サーバーは送信したデータを正しく実行し、対応する結果を返すことができます。テストするには、検索ボックスにテキストを入力します。ただし、データベース内にこのテキストに関連するコンテンツが存在することが前提となります。関連するプロンプト コンテンツがないため、プロンプト ボックスが表示されません (笑)。
しかし、まだ少し欠陥があります。それは、Baidu 検索で見たプロンプト ボックスと比較すると、プロンプト ボックスの内容があまりにも醜いということです。笑、心配しないでください。CSS を使用します。表示効果を調整します
#search_auto li{background:#FFF; text-align:left;} /*プロンプト ボックスに li ラベル効果を設定します*/<br>
#search_auto li.cls{text-align:right;} /*プロンプト ボックスに閉じるボタンの効果を設定します*/<br>
#search_auto li a{padding:5px 6px;cursor:pointer; color:#666;} /*プロンプトボックスの li ラベルの下にラベル効果を設定します*/<br>
#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;}
スタイル>
<div id="検索">
<br>
<input type="text" name="k" class="k"> <input type="button" name="s" value="検索"><br>
</div>
<br>
<div id="search_auto"></div>