Question

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

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

实施例。我搜索＆＃34;马＆＃34;一切正常。然后，当我删除字符以使输入为空时，div会向上滑动，然后再次向下滑动搜索结果＆＃34; H＆＃34;。

我该如何解决这个问题？

代码

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

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

即可

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

1 个答案: