javascript - 当输入文本被清除时，如何隐藏ajax搜索结果？

Question

I could finally get my ajax search work, but I couldn't hide the results when I clear the input text box. Also, I couldn't select the search result so that it should retain in the input text box

这是 Ajax 代码: Ajax.js

$(function () {
$('#search').keyup(function () {
    $.ajax({
        type: "POST",
        url: "search",
        data: {
            'search_text': $('#search').val(),
            'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
        },
        success: searchSuccess,
        dataType: 'html'
    });
});
});

function searchSuccess(data, textStatus, jqXHR) {
$('#search-results').html(data);
}

这是 html 模板 模板.html

<input type="text" id="search" name="search" class="search" value="Enter Loc" size="35" maxlength="300" style="margin-left:10px;color:#d5caca" onclick="document.getElementById('search').value = ''" />
    <a class="lr" style="text-decoration:none" href="#">Search</a>
    <ul id="search-results" style="color:#ffffff;margin-left:35%">
    </ul>

提前感谢您的帮助!**

Answer 1

如果值为空，则清除结果面板

$(function () {
    $('#search').keyup(function () {
        //clear result panel if the value is blank
        if (!this.value.trim()) {
            $('#search-results').html('');
            return;
        }
        $.ajax({
            type: "POST",
            url: "search",
            data: {
                'search_text': $('#search').val(),
                'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
            },
            success: searchSuccess,
            dataType: 'html'
        });
    });
});

function searchSuccess(data, textStatus, jqXHR) {
    $('#search-results').html(data);
}