jquery dynamic autocomplete textbox url

Question

I am generating dynamic textboxes for autocomplete depending on user input.

var projects = [
        {
            label: "Test12",
            desc: "responsive web application kit"
        },
        {
            label: "Londinium",
            desc: "responsive bootstrap 3 admin template"
        },
        {
            label: "It's Brain",
            desc: "Bootstrap based "
        }
    ];

    // Initialize autocomplete
    $(document).on('click', '.ac-custom', function () {
        $(this).autocomplete({
            minLength: 0,
            source: function (request, response)
            {
                $.ajax({
                    url: "/Home/GetInfo",
                    type: "POST",
                    dataType: "json",
                    data: { Name: $(this).val() },
                    success: function (data) {


                    }
                });
            },
            focus: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            }
        })
        .autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li>").append("<span class='text-semibold'>" + item.label + '</span>' + "<br>" + '<span class="text-muted text-size-small">' + item.desc + '</span>').appendTo(ul);
        }
    });

If I give the source as projects this works but I need to fetch from database so I am calling an action method but somehow this is not working. Is it because I am binding ajax call to controls created at runtime. Your help is appreciated. Thanks

Bharatsing Parmar · Accepted Answer · 2016-12-31 09:12:26Z

1

You need pass data in response from success callback

// Initialize autocomplete
    $(document).on('click', '.ac-custom', function () {
        $(this).autocomplete({
            minLength: 0,
            source: function (request, response)
            {
                $.ajax({
                    url: "/Home/GetInfo",
                    type: "POST",
                    dataType: "json",
                    data: { Name: $(this).val() },
                    success: function (data) {
                        response( data );
                    },
                    error: function (jqXHR, exception) {
                        var msg = '';
                        if (jqXHR.status === 0) {
                          msg = 'Not connect. Verify Network.';
                        } else if (jqXHR.status == 404) {
                          msg = 'Requested page not found. [404]';
                        } else if (jqXHR.status == 500) {
                          msg = 'Internal Server Error [500].';
                        } else if (exception === 'parsererror') {
                          msg = 'Requested JSON parse failed.';
                        } else if (exception === 'timeout') {
                          msg = 'Time out error.';
                        } else if (exception === 'abort') {
                          msg = 'Ajax request aborted.';
                        } else {
                         msg = 'Uncaught Error.';
                        }

                       alert(msg + "<br/>responseText: " + jqXHR.responseText);
                     }
                });
            },
            focus: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            }
        })
        .autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li>").append("<span class='text-semibold'>" + item.label + '</span>' + "<br>" + '<span class="text-muted text-size-small">' + item.desc + '</span>').appendTo(ul);
        }
    });

edited Dec 31, 2016 at 9:12

answered Dec 31, 2016 at 9:05

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

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

2 Comments

Johny Bravo Over a year ago

Yes that's fine but call is not made to "/Home/GetInfo" so there is nothing in response

Bharatsing Parmar Over a year ago

Add error callback and let us know what is the error? I have updated code and added error callback

Manoj · Accepted Answer · 2016-12-31 09:29:19Z

1

Update you source function like this

source: function (request, response) {
                $.ajax({
                    url: '/Home/GetInfo',
                    data: { 'text': $.trim($('#yourtextboxid').val()) },
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.name,
                                id: item.id
                            }
                        }));
                    }
                })
            }

This will help you

answered Dec 31, 2016 at 9:29

Manoj

5,0913 gold badges34 silver badges59 bronze badges

Collectives™ on Stack Overflow

jquery dynamic autocomplete textbox url

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related