Javascript 搜索字段为空时隐藏结果div-Ajax实时搜索

我试图为我的项目做一个简单的Ajax实时搜索，Javascript不是我的强项。当搜索短语大于0时，它应该发出AJAX请求，设置html并显示结果div（通过SlideDown）。如果短语长度返回零，则结果div应向上滑动

我的问题是，当长度返回到零时，由长度为1的短语进行的AJAX调用尚未完成（因为它是一个异步请求），然后使用最后一个请求的结果再次显示result div，即使输入字段为空

我搜索“马”，一切正常。然后，当我删除字符以使输入为空时，div向上滑动，然后再向下滑动，搜索结果为“H”

我如何解决这个问题

代码

---

这其实很简单。只需使用

.abort（）

即可中止

ajax（）

请求。因此，将您的

ajax（）

调用分配给一个变量，例如“my\u ajax\u request”。当搜索字段中有0个字符时，只需调用

my_ajax_request.abort（）
您好，谢谢您的回答。这对我不起作用。当短语长度等于零时，请求的readyState为4。。也许我做错了。但你给了我一个解决我问题的办法。我在keyup函数外设置了一个变量setHtml=true，如果phrase.length==0:setHtml=false。然后，当前面的请求到达完整函数时，我可以检查setHTML。成功了。
let delayTimer;
$('.search').on('keyup', function () {
    let phrase = $(this).val();

    if (phrase.length > 0) {

        clearTimeout(delayTimer);

        delayTimer = setTimeout(function () {
                $.ajax({
                    type: 'post',
                    url: '.......',
                    data: {
                        phrase: phrase
                    },
                    success: function (response) {
                        let el = $('#search-result');

                        if (response.type == 'success') {
                            el.html(response.html)
                        } else if (response.type == 'error') {
                            el.html(response.message)
                        }
                    },
                    complete: function () {
                        let el = $('#search-result');

                        if (el.is(':hidden')) {
                            el.slideDown(300)
                        }
                    }
                });
        }, 350);
    } else {
        let el = $('#search-result');

        if  (el.is(":visible")) {
            el.stop().slideUp(300);
        }
    }
});