コンテナを介したライブライブ検索

Question

ライブ検索を行うためにJSのいくつかの行に取り組んでいます。私はこれを修正しようとしていますhttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_list

私が探していることを行うには、どのように私が間違っているのか理解できないようです。任意のポインタや修正は非常に高く評価されます。

JSそれは検索ボックスと私は探していますの検索

var navbarSearchbutton = document.getElementById('navbar-search-button')[0]; 
navbarSearchbutton.addEventListener('onkeyup', function() { 
    searchFunction(); 
}); 

function searchFunction() { 
    var input, filter, ul, li, a, i, foo; 
    foo = document.getElementsByClassName("twit"); 
    input = document.getElementById("navbar-search-input"); 
    filter = input.value.toUpperCase(); 
    li = document.getElementsByClassName("twit-text"); 
    for (i = 0; i < li.length; i++) { 
     a = li[i].getElementsByTagName("P")[0]; 
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
      li[i].style.display = ""; 
     } else { 
      foo[i].style.display = "none"; 
     } 
    } 
} 

HTMLが含まれていない任意のなじるを非表示にします。

  <li class="navitem navbar-search"> 
     <input type="text" id="navbar-search-input" placeholder="Search..."> 
     <button type="button" id="navbar-search-button"><i class="fa fa-search"></i></button> 
     </li> 
    </ul> 
    </nav> 
</header> 

    <main class="twit-container"> 
    <article class="twit"> 
<div class="twit-icon"> 
    <i class="fa fa-bullhorn"></i> 
</div> 
<div class="twit-content"> 
    <p class="twit-text"> 
    A body in motion must remain in motion unless acted upon by an outside force. 
    </p> 
    <p class="twit-attribution"> 
    <a href="#">NewtonRulez</a> 
    </p> 
</div> 

Answer 1

まずあなたがIDによる「ナビゲーションバー検索ボタン（取得している。だから、それはIDを返しません。 第二に、クラス名による検索のロジックが動作しません。以下は更新された検索機能です。クラス名で項目を検索するのと同じロジックを保ちました。新しい項目のクラス名をtwit-attributionとして設定する必要があります。

function searchFunction() { 
    var input, filter, ul, li, a, i, foo; 
    foo = document.getElementsByClassName("twit"); 
    input = document.getElementById("navbar-search-input"); 
    filter = input.value.toUpperCase(); 
    li = document.getElementsByClassName("twit-attribution"); 
    for (i = 0; i < li.length; i++) { 
     a = li[i]; 
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
      a.style.display = ""; 
     } else { 
      a.style.display = "none"; 
     } 
    } 
}