jquery autocomplete not filtering data

Question

I am working on Jquery UI autocomplete to pull data and piopulate based on text I type.

1. Data is getting populated on typing text in textbox
2. Issue was data is not filtered based on what I typed.

What would be the issue in below code

<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>

Answer 1

Since you have a ajax request to fetch data, it is better to sent the filtered data from the sever insead of loading the data every time and filtering it locally.

But if you can't do that, in the worst case scenario try

$(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) {

        }
    });
});

---

Another solution is to load the resource at dom ready and then create the aucomplete using that array

$(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) {

        }
    });
});

---

Another solution if you want to cache is to use a local cache(using a variable) like below(not tested) - here the array is loaded only once, if it is already loaded then instead of using ajax again we use the value of the array

$(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) {

        }
    });
});