通過對象進行實時搜索

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); 
     } 
    }); 
});