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

labelプロパティが提案メニューに表示されます。ユーザーがアイテムを選択すると、値が入力要素に挿入されます。1つのプロパティのみが指定されている場合、そのプロパティは両方に使用されます。たとえば、値のプロパティのみを指定した場合、その値はラベルとしても使用されます。

于 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 に答える