Question

我正在学习Ajax并使用以下练习代码来显示搜索结果。但是我注意到一旦用户退格并清空搜索结果框，结果仍然存在。如果用户清空搜索框时结果被完全删除，那将是理想的选择。因此，当用户开始输入时，结果开始填充，当他清空该框时，没有任何内容可供显示。我的代码是：

$('#search').keyup(function() {
    var searchField = $('#search').val(),
        myExp = new RegExp(searchField, "i");
    $.getJSON('data.json', function (data) {
        var output = '<ul class = "searchresults">';
        $.each(data, function (key, val) {
            if ((val.name.search(myExp) !== -1) ||
                    (val.bio.search(myExp) !== -1)) {
                output += '<li>';
                output += '<h2>' + val.name + '</h2>';
                output += '<img src="images/' + val.shortname + '_tn.jpg" alt = "' + val.name + '"/>';
                output += '<p>' + val.bio + '</p>';
                output += '</li>';
            }
        });
        output += '</ul>';
        $('#update').html(output);
    });
});

Answer 1

尝试在每个按键后检查它是否为空，如果是，则应中止ajax请求并清空结果列表。检查您是否可以在searchField声明后添加此代码：

if(searchField==""){
    $('#update').html("");   //to empty the result list
    return;                  //return is to abort the operation
}

祝你好运

在Ajax中如何在用户清空搜索框时删除搜索结果？

1 个答案: