jquery autocomplete not filtering data

Question

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

Data is getting populated on typing text in textbox
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>

since you are using remote data, you have to sent the filtered data from the server — Arun P Johny
– Arun P Johny, Commented Feb 19, 2014 at 4:44

Arun P Johny · Accepted Answer · 2014-02-19 05:12:09Z

20

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

        }
    });
});

edited Feb 19, 2014 at 5:12

answered Feb 19, 2014 at 4:46

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kurkula Over a year ago

Arun, This is very good solution, Could you please tell me one point. Does my code 1. Pull all records from server at a time cache them and filter them on every time I type from local? 2. Get all records from server every time I type term?

Arun P Johny Over a year ago

that depends on the caching attribute of the remote resouce

Kurkula Over a year ago

I used cache:true, it means I will get records from server only once. Could you please correct me? If that a best practice?

Manish Patwari Over a year ago

The second code of Arun's will get the data only once and it will be with the JS variable. So, second solution is the best.

Arun P Johny Over a year ago

@Usham no... the cache headers has to set by the server

|

Collectives™ on Stack Overflow

jquery autocomplete not filtering data

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related