使用jQuery自动完成从数据库中检索搜索数据？

Question

我正在使用 jQuery UI 自动完成插件在我的 ASP.NET Web 应用程序中更好地输入数据。

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

但是，我想我不知何故迷失了这个插件。 我想问我应该怎么做才能使用这个自动完成功能和从数据库中检索的数据？

我希望 Ajax 应该用于实时搜索， 但是看了上面网站上的demo后，我不知道怎么做。

非常感谢。

更新：

这是我尝试过的代码，不起作用，但在firebug中也没有错误。

                $('#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

您需要创建一个执行查找并将结果作为 JsonResult 返回的操作

例如

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

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

Answer 2

我不确定这是否能解决您的所有问题，但您可以进行一些修改。

1. 您不需要 URL 的“?firstname=”部分，因为您正在为您的 ajax 请求使用数据参数。

2. 与其使用 $('#FirstName').val() 获取搜索词，不如尝试使用请求对象 (request.term) 的 term 属性。

例如：

$('#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
                                }
                            }));
                        }
                    });
                }
            });