空白の検索バーがあるページがあり、その下のテーブルに連絡先がたくさんあります。各連絡先は 1 つの div です。
テキストが検索バーに入力されると、連絡先テーブルをフィルタリングできるようにしたいと考えています。(たとえば、検索バーに「Fran」と入力すると、名前に「Fran」が含まれる連絡先のみが表示されます。「Fran」が削除されると、すべてがデフォルトに戻ります。)
これは可能ですか？どのように？(私はインスタント検索 diy ガイドを見つけましたが、検索バーの下にドロップダウンがあるという Google の方法でしか機能しませんでした。)
この jquery プラグインを使用することをお勧めします。ajax やサーバー通信は必要ありません。キーストロークごとに入力ボックスの内容に従ってレンダリングされたテーブルをフィルタリングするだけです。
これを機能させるには、このプラグインとともにプロジェクトに jquery ライブラリも必ず含めてください。
以下に必要な基本的なロジックを示しますが、これは逆です。完全に一致する場合にのみ、コンテンツを非表示にします。また、これは on 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>
同じためにjQueryオートコンプリートプラグインを試すことができます