Problem mit Eingabeformular und Schleife durch ein Objekt

Question

Ich versuche, diese Herausforderung für eine FreeCodeCamp Herausforderung zu lösen, und ich stoße auf ein Problem, ich habe keine Ahnung, wie zu lösen.

Dies ist ein Link auf die Codepen wo ich meinen Code alle gesetzt haben: Click here

Grundsätzlich ist das Problem mit der letzten Funktion ist, die eine durch die Liste von Benutzern zu suchen. Ich habe so gemacht, dass, wenn sich der Wert des Suchformulars ändert, es das Benutzerobjekt durchläuft und diejenigen ausblendet, die keine der eingefügten Zeichen enthalten.

Der ganze Code funktioniert gut, besonders seit ich bin console.log() -ing alle Variationen der Variablen in der Funktion, aber an der Front-End-Seite stoppt es nach zwei Iterationen. Wenn ich zum Beispiel nach Nelari suche, blendet der Code die meisten Benutzer aus, nachdem ich N eingefügt habe, und noch mehr Benutzer sind ausgeblendet, wenn ich e eintippe, aber nach diesen 2 Iterationen stoppt es. Auf der Konsole geht es weiter und gibt bis zum Schluss das richtige Ergebnis zurück, aber auf der Vorderseite hört es einfach auf.

Außerdem habe ich bemerkt, dass sogar einige der angezeigten Benutzer in Bezug auf das, was ich gesucht habe, korrekt sind, es behält einige von denen, die keine der Charaktere enthalten, die ich hineingelegt habe .

`

// 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

Als ich in Ihrem Code gesehen sind die Auswahl Sie die Elemente auszublenden nach Klasse:

der Einfachheit halber hier die Funktion Code ich werde setzen. Der Schlüssel der Konten könnte in Großbuchstaben und die Klassen in Kleinbuchstaben geschrieben sein. Da die CSS-Selektoren die Groß-/Kleinschreibung beachten (http://reference.sitepoint.com/css/casesensitivity), findet sie nicht das richtige zu verbergende Element. Wenn Sie accQuery verwenden, um das Element anstelle des Schlüssels zu erhalten, funktioniert es.

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

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