自动完成ajax请求只有当项目从以前的ajax请求数据不匹配

Jquery Autocomplete ajax request only if item from previous ajax request data is not matching

本文关键字：请求 ajax 不匹配 项目 数据      更新时间：2023-09-26

我使用jQuery自动完成。每次按键都会发出AJAX请求，这不是我想要的。如果以前的AJAX请求中的数据与搜索匹配，则不应再发出任何AJAX请求。

<script>
    $('#tags').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/TestDDl/Index',
                // data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.user, function (item) {
                        return {
                            label: data.name,
                            val: data.val
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        autoFocus: true,
        keypress: function (event, ui) {
            alert('Not Selected');
            if (!ui.item) {
                alert('Not Selected');
            }
        }
    });
});

在这里，如果我输入的用户名已经在以前的AJAX请求数据中，它不应该在接下来的按键上发出AJAX请求。

您可以声明一个变量，将用户输入传递给它，然后在成功函数中更新它。在进行下一次调用之前，检查变量是否与下一个数据匹配。

像这样:

<script>
    var recent = '';
    $('#tags').autocomplete({
        source: function (request, response) {
            if (recent == request.term) {
                return;
            }
            recent = request.term;
            $.ajax({
                url: '/TestDDl/Index',
                data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.user, function (item) {
                        return {
                            label: data.name,
                            val: data.val
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        autoFocus: true,
        keypress: function (event, ui) {
            alert('Not Selected');
            if (!ui.item) {
                alert('Not Selected');
            }
        }
    });
</script>

    <script>
    window.xyz = []; //For saving history
    $('#tags').autocomplete({
        source: function (request, response) {
            if(xyz[request]){
                response(xyz[request]); // Return previously saved data
            }else(
                $.ajax({
                    url: '/TestDDl/Index',
                    // data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        var res = $.map(data.user, function (item) {
                            return {
                                label: data.name,
                                val: data.val
                            }
                        });
                        xyz[request]=res; //set data to reuse later
                        response(res)
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            }
        },
        autoFocus: true,
        keypress: function (event, ui) {
            alert('Not Selected');
            if (!ui.item) {
                alert('Not Selected');
            }
        }
    });
</script>

下一个ajax请求应该在第一个ajax请求的Success函数中。在那里建立逻辑。如果你找到匹配，不要调用第二个ajax请求，否则调用第二个ajax请求，所有这些都应该在第一个ajax请求的成功函数

相关文章：