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

Question

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