在 MVC 5 中利用 JQuery 的 Autocomplete 完成搜索自动填充功能

最近，用 MVC 5 写个工厂的数据管理系统，需要用到如同百度搜索自动显示搜索选项的功能。

在网络上搜索了很长时间，发现了 jquery 的 autocomplete 实现起来比较简单而且容易理解，在这里记录一下。

首先，在 Controller 里面加入用于获取数据库中特定数据并返回 Json 格式数据的动作方法。

public JsonResult QueryProduct(string Prefix)
{
	var infoList = from i in db.Infos
				   where i.Product.StartsWith(Prefix)
				   select new { i.Product };
	return Json(infoList, JsonRequestBehavior.AllowGet);
}

上述操作很简单，就是从数据库上下文中选取特定的数据项，不进行赘述。

之后，在 View 里面加入以下代码。

@section Script {
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Product").autocomplete({
                source: function (request, response) {
                    var rPrefix = $("#Product").val();
                    $.ajax({
                        url: "/Detect/QueryProduct",
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: rPrefix },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.Product, value: item.Product };
                            }))
                        }
                    })
                },
                messages: {
                    noResults: "", results: ""
                },
                minLength: 2,
                delay: 10
            });
        }
    </script>
}

解释一下其中的主要内容：

• rPrefix是获取的网页中文本值；
• $.ajax 请求获得 url 返回的数据；
• success 请求成功后对返回的数据进行处理并响应到 response 当中。

简单了解一下就可以实现了~

另外，需要的库有两个，分别是 jquery 和 jquery-ui，记得要加载到项目里面。