オブジェクトを介した入力フォームとループの問題

Question

私はFreeCodeCampチャレンジのこの課題を解決しようとしていますが、私はどのように解決するのか分かりません。

これは私がすべての私のコードを入れているCodepenへのリンクです：Click here

基本的に問題は最後の関数、ユーザのリストを検索するために使用されるものです。 私は、検索フォームの値が変更されるたびに、ユーザーオブジェクトをループし、挿入された文字のいずれも含まないものを隠すようにしました。

私はconsole.log()ですから、関数内の変数のすべてのバリエーションがありますが、フロントエンド側では2回の繰り返しの後に停止します。たとえば、Nelariを検索した場合、コードはNを挿入した後でほとんどのユーザーを隠し、eと入力するとさらに多くのユーザーが表示されなくなりますが、この2回の繰り返しが終了するとユーザーは非表示になります。コンソール上ではそれが続き、最後まで正しい結果を返しますが、フロントサイトでは停止します。

それ以外にも、私が検索したユーザーの一部であっても、私が入力した文字を含まないもの。簡単にするために

私もここで機能コードを入れます：

`

// SEARCH FORM 
window.addEventListener('input', function (e) { 
     var searchQuery = $("input").val().toLowerCase().replace(/[^A-Z0-9_]/ig, ""); 
    search(Acc, searchQuery); 
    }, false); 

function search (accounts, what) { 
    console.log(what); 
    if (what.length > 0) { 
     Object.keys(accounts).forEach(function(key) { 
      var IDD = "." + key; 
      console.log(IDD) 
      accQuery = key.toLowerCase(); 
      console.log(accQuery); 
      if (accQuery) { 
       if (accQuery.indexOf(what) >= 0) { 
        $(IDD).css({"display": "block"}); 
        console.log("FOUND!"); 
       }; 
       if (accQuery.indexOf(what) == -1) { 
        $(IDD).css({"display": "none"}); 
        console.log("NOT FOUND!"); 
       }; 
      }; 

     }); 
    } 
    else if (what.length < 1) { 
     Object.keys(accounts).forEach(function(key) { 
      var IID = "." + key; 
      $(IID).css({"display": "block"}); 
     }); 
    }; 
};` 

Answer 1

を、私はあなたが非表示にするクラスで要素を選択しているあなたのコードで見たように。アカウントのキーは大文字で、liクラスは小文字にすることができます。 CSSセレクタでは大文字と小文字が区別されるため（http://reference.sitepoint.com/css/casesensitivity）、隠す正しい要素は見つかりません。キーの代わりに要素を取得するためにaccQueryを使用すると、それは機能します。

accQuery = key.toLowerCase(); 
    console.log(accQuery); 

    var IDD = "." + accQuery ; 
    console.log(IDD)