Question

我已经找到了答案，但找不到我正在寻找的答案。所以，请原谅这个问题是否得到了解答。

我有一个非常大的sql表，我想在jquery自动完成输入字段中使用。我知道我需要以json格式返回该数据，只是不确定实现此目的的最佳方法。该字段位于ASP.net MVC应用程序中。

我知道我可能会做一个返回结果的php页面，但这对我来说似乎有些混乱。最好的方法是创建一个我称之为的Web服务吗？

提前感谢您的帮助。

Answer 1

以下是我如何完成此操作的一些代码。我正在使用jquery UI插件

我视图中的javascript

$（function（）{

        $("#suburb").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("ManufacturerAutoComplete", "AutoComplete")', type: "POST", dataType: "json",
                    data: { searchText: request.term, maxResults: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.DisplayValue, value: item.Suburb, id: item.SuburbID, postcode: item.Postcode, state: item.State }
                        }))
                    }
                })
            },
            select: function (event, ui) {

                $("#state").val(ui.item.state);
                $("#postcode").val(ui.item.postcode);

            }
        });

我视图中的输入

<input type="text" id="suburb" />

最后来自我的控制器的代码

[HttpPost]
        public JsonResult ManufacturerAutoComplete(string searchText)
        {

            if (searchText.Length > 2)
            {
                var service = new SuburbSearchServiceClient();
                var results = service.SearchSuburb(searchText, "Australia");

                List<Suburbs> sList = new List<Suburbs>();

                foreach (var item in results)
                {
                    sList.Add(new Suburbs() { SuburbID = item.SuburbID, Suburb = item.Suburb, State = item.State, Postcode = item.Postcode, DisplayValue = item.Suburb + " - " + item.State + " - " + item.Postcode });
                }

                return Json(sList);
            }
            else
            {
                var data = string.Empty;
                return Json(data);
            }
        }

您需要在jquery-ui插件中包含js和css，并且自动完成的结果将显示在input元素下方。正如你从JsonResult方法中看到的那样，我正在调用一个Web服务来获取我的郊区数据，但这可能来自现实中的任何地方。希望这可以帮助。

Answer 2

这里是jquery-autocomplete example，这可能对轻松启动有好处！

Answer 3

以下是一个很好的示例http://blog.schuager.com/2008/09/jquery-autocomplete-json-apsnet-mvc.html

如果您需要调整JSON结果，可以使用JavaScriptConverter class

将sql数据拉入jquery自动完成

3 个答案: