javascript - 搜索字段为空时隐藏结果 div - Ajax Live Search

Question

我正在尝试为我的项目制作一个简单的 Ajax 实时搜索，而 Javascript 不是我的强项。当搜索短语大于 0 时，它应该发出 AJAX 请求，设置 html 并显示结果 div(通过 SlideDown)。如果短语长度然后返回到零，则 result-div 应该向上滑动。

我的问题是，当长度回到零时，长度为 1 的短语进行的 AJAX 调用还没有完成(因为它是一个异步请求)，然后再次显示结果 div 的结果最后一个请求，即使输入字段为空。

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

我该如何解决这个问题？

代码

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

Answer 1

这其实很简单。您可以简单地使用 .abort() 中止 ajax() 请求。因此，将您的 ajax() 调用分配给一个变量，例如“my_ajax_request”。当搜索字段中有 0 个字符时，只需调用 my_ajax_request.abort();