Retrieving search data from database using jQuery autocomplete?

Question

I am using jQuery UI Autocomplete plugin for better data input in my ASP.NET web application.

However, I think I have somehow lost in this plugin. I would like to ask what I should do in order to use this autocomplete function with the data retrieve from database?

I expect Ajax should be used for the real-time search, but I have no idea how it can be done after looking at the demo in the website above.

Thanks so much.

Update:

Here is the code I have tried, doesn't work, but no error in firebug too.

                $('#FirstName').autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "/Contact/FirstNameLookup?firstName=",
                            type: "POST",
                            data: {
                                "firstName": $('#FirstName').val() 
                            },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        label: item.FirstName,
                                        value: item.FistName
                                    }
                                }));
                            }
                        });
                    }
                });

Yes. I have tried before, but still no luck for me. I think I have either messed things up or simply misunderstood the concept...... please note my edit above. — Hei
– Hei, Commented Jan 5, 2012 at 2:02

StanK · Accepted Answer · 2012-01-05 03:53:15Z

2

You need to create an action that does the lookup and returns the result as a JsonResult

e.g.

public ActionResult FirstNameLookup(string firstName)
{
    var contacts = FindContacts(firstname);

    return Json(contacts.ToArray(), JsonRequestBehavior.AllowGet);
}

answered Jan 5, 2012 at 3:53

StanK

4,7702 gold badges24 silver badges47 bronze badges

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

1 Comment

Hei Over a year ago

Thanks for the advice. Turns out the controller method is the source of this problem, I have implemented something wrong in the method so the autocomplete crash.

MJR · Accepted Answer · 2012-01-05 02:38:59Z

1

I'm not sure if this will solve all your problems but here are a couple of edits you can make.

you don't need the "?firstname=" part of the url since you are using the data parameter for you ajax request.
rather than grabbing your search term with $('#FirstName').val(), try using the term property of the request object (request.term).

for example:

$('#FirstName').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Contact/FirstNameLookup",
                        type: "POST",
                        data: {
                            "firstName": request.term 
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.FirstName,
                                    value: item.FistName
                                }
                            }));
                        }
                    });
                }
            });

answered Jan 5, 2012 at 2:38

MJR

211 bronze badge

1 Comment

Hei Over a year ago

Thanks for the recommendation. But at last, I have found that the problem is related to the controller, and it is only a tiny bug which crash the autocomplete function.......

Collectives™ on Stack Overflow

Retrieving search data from database using jQuery autocomplete?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related