divを表示/非表示にする動的検索機能

Question

これはStackOverflowの最初の投稿です。私はそれがひどく間違っていないことを願っています。

<input type="Text" id="filterTextBox" placeholder="Filter by name"/> 
<script type="text/javascript" src="/resources/events.js"></script> 
<script> 
$("#filterTextBox").on("keyup", function() { 
    var search = this.value; 
    $(".kurssikurssi").show().filter(function() { 
     return $(".course", this).text().indexOf(search) < 0; 
    }).hide();   
}); 

</script> 

は、私がここで見つけることができます私の学校のプロジェクト、上のようなJavaScriptのスニペットを持っている： http://www.cc.puv.fi/~e1301192/projekti/tulos.html

だから、一番下にある検索バーは、divをフィルタリングし、特定の含まれているもののみを表示することになっていますキーワード。 （t.ex、Digital Electronicsと入力すると、 "Digital Electronics II"と "Digital Electronics"という文字を含むDivsのみが表示されますが、今はランダムな言葉を入力すると、タイプのコース名の先頭には、それが特定のテキスト文字列を含むいけないコースを隠しません。ここ

は私が（正常に動作する）使用例です。説明するのhttp://jsfiddle.net/Da4mX/

ハード、また、私はjavascriptには新しく、検索ボックスの文字列をvar検索として設定する部分があります。残りの部分については私はあまり確信していません。

スクリプトを分解して、間違っている箇所や問題を解決する方法を指摘してください。

Answer 1

あなたのケースでは私はあなたが表示さだと思うし、あなたはあなたが間違った要素にアクセスしていた

$("#filterTextBox").on("keyup", function() { 
    var search = $(this).val().trim().toLowerCase(); 
    $(".course").show().filter(function() { 
     return $(this).text().toLowerCase().indexOf(search) < 0; 
    }).hide();   
}); 

Answer 2

を試すことができますので、コースの親を非表示にします。これは動作しているはずです：

$(".kurssikurssi").find('.course').show().filter(function() { 
     var $this = $(this) 
     if($this.text().indexOf(search) < 0){ 
       $this.hide() 
     } 
}) 

Answer 3

これは現在動作しています。このコードをコンソールに貼り付けて、検索して確認してください。

$("#filterTextBox").on("keyup", function() { 
 
    var search = this.value; if(search == '') { return } 
 
$(".course").each(function() { 
 
    a = this; if (a.innerText.search(search) > 0) {this.hidden = false} else {this.hidden = true} 
 
}); }) 
 

チェックと検索が今取り組んでいます。

Answer 4

あなたの問題がある：jQueryのドキュメントから

return $(".course", this) 

：http://api.jquery.com/jQuery/#jQuery-selection

Internally, selector context is implemented with the .find() method, so $("span", this) is equivalent to $(this).find("span")

フィルタ機能、すでに各要素をチェック そして、あなたは$を置くしようとすると、（ "コース"）でコンテキストを再取得します。

有効なコード：

実際には

$("#filterTextBox").on('keyup', function() 
{ 
    var search = $(this).val().toLowerCase(); 
    $(".course").show().filter(function() 
    { 
     return $(this).text().toLowerCase().indexOf(search) < 0; 
    }).hide(); 
}); 

、あなたは、代わりに使用することができます（）CSSセレクタ、 が含まれていますが、それは大きなリスト向けに最適化していないされていないが

http://caniuse.com/#search=contains