空の検索バーが表示されているページがあり、テーブルの下にある連絡先の束が表示されます。各連絡先は1つのdivです。PHP/Javascript - インスタント検索は異なりますか？
テキストが検索バーに入力されると連絡先表をフィルタリングできるようにしたいと考えています。 （たとえば、「Fran」が検索バーに入力された場合、「Fran」が削除された場合、すべてがデフォルトに戻ります）
これは可能ですか？どうやって？（私はインスタント検索DIYのガイドを見つけたが、それは唯一の検索バーの下にあるドロップダウンでは、Googleが行う方法を働いていた。）
私はthis jquery pluginを使用することをお勧めし、それは単にフィルタ、何のAJAXやサーバの通信を必要としませんすべてのキーストロークで入力ボックスの内容に従ってレンダリングします。
このプラグインと一緒にプロジェクトにjqueryライブラリも含めてください。
次は、それは逆だが、あなたが必要とする基本的なロジックが含まれているのと同じ
のためのjQuery auto complete pluginを試すことができます - それが見つかったと完全一致のみのコンテンツを非表示にします。また、それはkeypressのイベントですので、名前を入力した後にスペースを叩いただけでdivを隠すことができるので、それも調整する必要があります。 長いテキスト文字列内で一致するものを探すには、検索文字列に対してテストするために正規表現を使う必要があります。ここで
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function(){
$(".searchbox").keypress(function(){
$("div").each(function(){
if($(this).text() == $(".searchbox").val()){
$(this).hide("fast");
};
});
});
});
</script>
</head>
<body>
<form><input type="text" class="searchbox"></form>
<div>Susan</div>
<div>Fran</div>
<div>Dave</div>
</body>
</head>
</html>
はあなたのためにいくつかの例のJavascriptです：
<script type="text/javascript">
$(document).ready(function() {
$("#search").keyup(function() {
// Get the search value
var searchValue = $(this).val();
// If no value exists then show all divs
if(searchValue === "") {
$(".your_div").show();
return;
}
// Initially hide all divs
$(".your_div").hide();
// Now show any that contain the search value
$(".your_div:contains('" + searchValue + "').show();
});
});
</script>
私はこれが適用されるとは思わない、投稿者が書いたように：「私はインスタント検索DIYのガイドを見つけたが、それは唯一の方法を働きましたGoogleは、検索バーの下にプルダウンを表示すると、 – huyz