Question

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

http://jqueryui.com/demos/autocomplete/

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
                                    }
                                }));
                            }
                        });
                    }
                });

Answer 1

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);
}