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，即使没有与该号码相关的ID。

我尝试在搜索中添加一个会清空结果的else子句，但即使使用有效的搜索也没有附加任何内容。

Answer 1

行

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

仅在您找到某个内容时被调用，或者搜索栏为空。

因此当您搜索3289时，不会显示任何内容，也不会清除列表。此外，如果您有多个匹配项，则只会添加最后一个匹配项

快速修复我建议在启动搜索之前调用[...].remove();并且不在$ each回调中：

$("#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);
        }
    });
});

通过对象实时搜索

1 个答案: