JQuery Autocomplete doesn't filter results

Question

Yeah, there are many questions in the forum but somehow none works for me. I am not doing very special.

My Autocomplete is populating the results but the results are not getting filtered

My code is :

$("#empName").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "api/clientEmp/of/" + sessionClientId + "/notingroup/" + groupId,
            type: "GET",
            dataType: "json",
            data: {
                term: $("#empName").val()
            },
            success: function(data) {
                response($.map(data, function(item) {
                    return {
                        label: item.EmpName,
                        value: item.EmpId
                    };
                }));
            }
        });
    },
    minLength: 0,
    focus: function(event, ui) {
        $("#empName").val(ui.item.label);
    }
});

And the json output is something like this

[
    {
        "EmpId": 26,
        "EmpNum": "Rel-72015-31",
        "EmpName": "R.durai"
    },
    {
        "EmpId": 21,
        "EmpNum": "REL-42015-22",
        "EmpName": "Zishan"
    },
    {
        "EmpId": 56,
        "EmpNum": "Rel-22015-19",
        "EmpName": "Raj Singh"
    }
]

It neatly shows the options but when i type anything this all results shows up and they are not filtered

I am missing a piece of code which asks to filter the results. Can anyone please suggest.

thanks in advance.

No.the query on the server is from around 35 tables. and at any given point of time the resultset will have not more than 10 records. So, I have stored procedure executed on the api call get the results in json and want populate the autocomplete — Lakshman Pilaka
– Lakshman Pilaka, Commented Sep 3, 2015 at 12:29

guvenckardas · Accepted Answer · 2015-09-03 12:54:58Z

6

$("#empName").autocomplete({
 source: function(request, response) {
    $.ajax({
        url: "api/clientEmp/of/" + sessionClientId + "/notingroup/" + groupId,
        type: "GET",
        dataType: "json",
        data: {
            term: $("#empName").val()
        },
        success: function(data) {
            var array = $.map(data, function(item) {
                return {
                    label: item.EmpName,
                    value: item.EmpId
                };
            });

             //call the filter here
                response($.ui.autocomplete.filter(array, request.term));
        }
    });
},
         minLength: 0,
      focus: function(event, ui) {
        $("#empName").val(ui.item.label);
      }
   });

answered Sep 3, 2015 at 12:54

guvenckardas

7384 silver badges8 bronze badges

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

1 Comment

lehel Over a year ago

How/why does this work? Previously I've sent back response(arrayHere); - all the resuts were there but it didn't filter and by changing the code to your answer it works - can you please explain?

Collectives™ on Stack Overflow

JQuery Autocomplete doesn't filter results

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related