通过对象进行实时搜索

Question

我有一个通过JavaScript对象进行实时搜索的功能，除了我在部分功能方面遇到问题外，它还可以很好地工作。

该函数显示的结果很好，但我似乎无法得到结果清除，一旦用户键入的东西不匹配。

searchData对象充满了一堆信息，但现在我只是试图通过ID搜索。

$("#search").on("keyup", function() { 
    let searchField = $(this).val(); 

    if (searchField === "") { 
     $("#search .search-results").remove(); 
     return; 
    } 

    let regex = new RegExp(searchField, "i"); 
    let output = ""; 

    $.each(searchData, function (key, val) { 
     if (val.id.search(regex) != -1) { 
      output += 
       "<p class='search-results'>" + val.id + "</p>"; 

      $("#search .search-results").remove(); 
      $("#search").append(output); 
     } 
    }); 
}); 

所以，现在如果用户输入328，它会用328显示他们相应的ID，但如果他们键入3289它仍然表明ID即使没有一个涉及数。

我试图在搜索中添加一个else子句来清空结果，但是即使使用有效的搜索也不会导致任何内容被追加。

Answer 1

行

$("#search .search-results").remove(); 

只调用如果你发现的东西，或者搜索栏是空的。

因此，当您搜索3289时，什么都没有显示出来，并且列表未被清除。此外，如果你有多个比赛，只有最后一个将被添加

快速修复我建议在发起搜索之前调用[...].remove();而不是$每次回调中：

$("#search").on("keyup", function() { 
    let searchField = $(this).val(); 

    //we call this one anyways 
    $("#search .search-results").remove(); 
    if (searchField === "") { 
     return; 
    } 

    let regex = new RegExp(searchField, "i"); 
    let output = ""; 

    $.each(searchData, function (key, val) { 
     if (val.id.search(regex) != -1) { 
      output += 
       "<p class='search-results'>" + val.id + "</p>"; 

      //and we remove this one 
      //$("#search .search-results").remove(); 
      $("#search").append(output); 
     } 
    }); 
});