输入表单问题和遍历对象

Question

我正在尝试解决这个 FreeCodeCamp 挑战，但我运行遇到了一个我不知道如何解决的问题。

这是 Codepen 的 link，我把我所有的代码都放在这里：Click here

基本上问题出在最后一个函数，即用于搜索用户列表的函数。我已经这样做了，每当搜索表单的值发生变化时，它都会循环遍历用户对象并隐藏那些不包含任何插入字符的对象。

整个代码工作得很好，特别是因为我正在 console.log()-ing 函数中变量的所有变体，但在前端它在两次迭代后停止。例如，如果我搜索 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

正如我在您的代码中看到的，您通过 class 选择要隐藏的元素。账户的密钥可以是大写的，li class 是小写的。由于 CSS 选择器区分大小写 (http://reference.sitepoint.com/css/casesensitivity)，它找不到要隐藏的正确元素。如果您使用 accQuery 获取元素而不是密钥，它将起作用。

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

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

输入表单问题和遍历对象

Issue with input form and looping through an object

javascript

jquery

frontend

loops