jquery自动完成不筛选数据

我正在使用jQueryUIAutoComplete来根据我输入的文本提取数据和数据

在文本框中键入文本时填充数据 问题是未根据我键入的内容筛选数据。 在下面的代码中会出现什么问题

<input type=text id="tbxPG">

<script type="text/javascript">
     $(document).ready(function (){ 
        $("#tbxPG").autocomplete({ 
            source: function (request, response) { 
                    $.ajax({ 
                        dataType: "json", 
                        data: { term: request.term, }, 
                        type: 'Get', 
                        contentType: 'application/json; charset=utf-8', 
                        xhrFields: { withCredentials: true }, 
                        crossDomain: true, 
                        cache: true, 
                        url: 'myURL',
                         success: function (data) {
                            response($.map(data.value, function (item) { return { label: item.Name, value: item.Name } })); }, error: function (data) {

                        }
                    });
            },
            minLength: 3,
            open: function () {

            },
            close: function () {

            },
            focus: function (event, ui) {

            },
            select: function (event, ui) {

            }
        });
    });
</script>

---

由于您有一个获取数据的ajax请求，因此最好从服务器发送过滤后的数据，每次加载数据并在本地进行过滤

但如果你不能做到这一点，在最坏的情况下，试试看

$(document).ready(function () {
    $("#tbxPG").autocomplete({
        source: function (request, response) {
            $.ajax({
                dataType: "json",
                data: {
                    term: request.term,
                },
                type: 'Get',
                contentType: 'application/json; charset=utf-8',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                cache: true,
                url: 'myURL',
                success: function (data) {
                    var array = $.map(data.value, function (item) {
                        return {
                            label: item.Name,
                            value: item.Name
                        }
                    });

                    //call the filter here
                    response($.ui.autocomplete.filter(array, request.term));
                },
                error: function (data) {

                }
            });
        },
        minLength: 3,
        open: function () {

        },
        close: function () {

        },
        focus: function (event, ui) {

        },
        select: function (event, ui) {

        }
    });
});

另一种解决方案是在dom就绪时加载资源，然后使用该数组创建aucomplete

$(document).ready(function () {
    //load the array first, it will happen only once - this is to be done if you are dealing with a small static data set
    $.ajax({
        dataType: "json",
        data: {
            term: request.term,
        },
        type: 'Get',
        contentType: 'application/json; charset=utf-8',
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        cache: true,
        url: 'myURL',
        success: function (data) {
            var array = $.map(data.value, function (item) {
                return {
                    label: item.Name,
                    value: item.Name
                }
            });

            //create the auto complete once the ajax request is completed
            $("#tbxPG").autocomplete({
                source: array,
                minLength: 3,
                open: function () {

                },
                close: function () {

                },
                focus: function (event, ui) {

                },
                select: function (event, ui) {

                }
            });
        },
        error: function (data) {

        }
    });
});

如果您想缓存，另一个解决方案是使用本地缓存，使用一个变量，如belownot tested，这里数组只加载一次，如果已经加载，那么我们使用数组的值，而不是再次使用ajax

$(document).ready(function () {
    var array;
    $("#tbxPG").autocomplete({
        source: function (request, response) {
            if (array) {
                response($.ui.autocomplete.filter(array, request.term));
            } else {
                $.ajax({
                    dataType: "json",
                    data: {
                        term: request.term,
                    },
                    type: 'Get',
                    contentType: 'application/json; charset=utf-8',
                    xhrFields: {
                        withCredentials: true
                    },
                    crossDomain: true,
                    cache: true,
                    url: 'myURL',
                    success: function (data) {
                        array = $.map(data.value, function (item) {
                            return {
                                label: item.Name,
                                value: item.Name
                            }
                        });

                        //call the filter here
                        response($.ui.autocomplete.filter(array, request.term));
                    },
                    error: function (data) {

                    }
                });
            }
        },
        minLength: 3,
        open: function () {

        },
        close: function () {

        },
        focus: function (event, ui) {

        },
        select: function (event, ui) {

        }
    });
});

---

由于您使用的是远程数据，您必须从服务器发送过滤后的数据。我如何才能做到这一点？Arun？数据是否在本地json文件中？如何过滤itArun，这是一个非常好的解决方案，请您告诉我一点。我的代码是1。一次从服务器中提取所有记录缓存它们，并在每次我从本地键入时对它们进行筛选？2.每次我键入term时从服务器获取所有记录？这取决于远程资源的缓存属性I used cache:true，这意味着我只从服务器获取一次记录。你能纠正我吗？如果这是一个最佳实践？Arun的第二个代码将只获取一次数据，并且将使用JS变量。所以，第二种解决方案是最好的。@Usham no。。。缓存头必须由服务器设置