Question

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

视图代码如下：

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

Answer 1

如果返回的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);

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

Answer 2

我修改了下面的代码，它完美无缺！谢谢“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);
}

jQuery-UI自动完成功能不起作用

2 个答案: