2

我需要在 .net MVC 程序中使用 jQuery-ui“自动完成”，但它不起作用。任何人都可以帮助我将不胜感激。

视图代码如下：

<head runat="server">
    <link href="../../Content/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
</head>

<script type="text/ecmascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/Product/GetProductName/",
            dataType: "json",
            data: { categoryID: <%: Model.Select(o => o.Category.CategoryName).Distinct().Count() > 1 ? 0 : Model.FirstOrDefault().CategoryID %> },
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                $('#productNameSearch').autocomplete({
                    minLength: 0,
                    source: Sys.Serialization.JavaScriptSerializer.deserialize(data),
                    focus: function(event, ui) {
                        $('#productNameSearch').val(ui.item.ProductName);
                        return false;
                    },
                    select: function(event, ui) {
                        $('#productNameSearch').val(ui.item.ProductName);
                        $('#selectedValue').text("Selected value:" + ui.item.ProductID);
                        return false;
                    }
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    });
</script>


<% using (Html.BeginForm("ProductNameSearch", "Product", FormMethod.Post)) {%>
        <input type="text" id="productNameSearch" name="productNameSearch" style="width:300px" />&nbsp;
        <input type="submit" value="Go!" />
        <div id="selectedValue"></div>
<%}%>

控制器代码如下：

[HttpGet]
public ActionResult GetProductName(int? categoryID)
{
    return Json(from p in pr.GetProductList() where p.CategoryID == 2 select new { ProductID = p.ProductID, ProductName = p.ProductName }, JsonRequestBehavior.AllowGet);
}
4

2 回答 2

2

如果您返回的 json 数据如下所示：

[ { ProductID: 1, ProductName: "Red Hat" }, { ProductID: 2, ProductName: "Red Scarf" }]

然后自动完成不知道要显示什么。

它需要一个值和/或标签字段。

尝试返回类似这样的数据：

[ { value: 1, label: "Red Hat" }, { value: 2, label: "Red Scarf" }]

也许有了这个改变（我不完全确定，但你应该明白）：

return Json(from p in pr.GetProductList() where p.CategoryID == 2 select new { value = p.ProductID, label = p.ProductName }, JsonRequestBehavior.AllowGet);

标签属性显示在建议菜单中。当用户选择一个项目时，该值将被插入到输入元素中。如果只指定了一个属性，它将用于两者，例如，如果您只提供值属性，则该值也将用作标签。

于 2012-12-07T23:14:49.940 回答
0

我修改了我的代码，如下所示，它完美无缺！谢谢“jk”。！！！

视图代码如下：

<head runat="server">
    <link href="../../Content/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
</head>

<script type="text/ecmascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/Product/GetProductName/",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: { categoryID: <%: Model.Select(o => o.Category.CategoryName).Distinct().Count() > 1 ? 0 : Model.FirstOrDefault().CategoryID %> },
            success: function(data) {
                if (data.length > 0) {
                    var dataFromServer = [];
                    for (i = 0 ; i < data.length; i++) {
                        dataFromServer[i] = data[i].ProductName;
                    }
                };
                $('#productNameSearch').autocomplete({
                    source: dataFromServer
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    });
</script>

<% using (Html.BeginForm("ProductNameSearch", "Product", FormMethod.Post)) {%>
        <input type="text" id="productNameSearch" name="productNameSearch" style="width:300px" />&nbsp;
        <input type="submit" value="Go!" />
<%}%>

控制器代码如下：

[HttpGet]
public ActionResult GetProductName(int? categoryID)
{
    Product product = new Product { CategoryID = categoryID };
    return Json(from p in pr.SearchProductList(product) select new { ProductName = p.ProductName }, JsonRequestBehavior.AllowGet);
}
于 2012-12-08T14:29:13.787 回答