jquery.autocomplete自动提示

前台代码

Views\Node\List.cshtml

@{
    ViewBag.Title = "List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.min.js")"></script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet"/>
<style type="text/css">
    .ui-autocomplete {
        max-height: 168px;
        overflow-y: auto; /* prevent horizontal scrollbar */
        overflow-x: hidden; /* add padding to account for vertical scrollbar */
    }

    .ui-autocomplete {
        height: 168px;
    }
</style>
<script type="text/javascript">
    $(function () {
        $("#menu ul li").eq(0).removeClass("current");
        $("#menu ul li").eq(13).addClass("current");
    })

    $(function () {
        $("#PublishmentSystemName").autocomplete({
            minLength: 0,
            delay: 500,
            focus: function (event, ui) {
                //$(event.target).val(ui.item.label);
                return false;
            },
            search: function (event, ui) {
                $("#PublishmentSystemID").val("");
                var ra = Math.random();
                $(event.target).autocomplete("option", { source: '@Url.Action("GetData")' + '?ra=' + ra });
            },
            open: function (event, ui) {
                OnOpen(event, ui);
            },
            source: '@Url.Action("GetData")',
            select: function (event, ui) {
                var elem = $(event.target);
                elem.val(ui.item.label);
                //alert(ui.item.label + "," + ui.item.value);
                $.ajax({
                    url: "/Node/Grid_Node",
                    type: 'post',
                    data: {
                        id: ui.item.value
                    },
                    success: function (data) {
                        var str = "";
                        for (var i = 0; i < data.length; i++) {
                            if (i % 2 == 0) {
                                if (data[i].Show == "True") {
                                    str += "<tr class=\"odd\">" + "<td style=\"width:150px;\">" + "<input value=\"" + data[i].Id + "\" name=\"Item\" type=\"checkbox\" checked=\"checked\" />" + "</td><td style=\"width:300px;\">" + data[i].Name + "</td></tr>";
                                }
                                else {
                                    str += "<tr class=\"odd\">" + "<td style=\"width:150px;\">" + "<input value=\"" + data[i].Id + "\" name=\"Item\" type=\"checkbox\" />" + "</td><td style=\"width:300px;\">" + data[i].Name + "</td></tr>";
                                }
                            }
                            else {
                                if (data[i].Show == "True") {
                                    str += "<tr>" + "<td style=\"width:150px;\">" + "<input value=\"" + data[i].Id + "\" name=\"Item\" type=\"checkbox\" checked=\"checked\" />" + "</td><td style=\"width:300px;\">" + data[i].Name + "</td></tr>";
                                }
                                else {
                                    str += "<tr>" + "<td style=\"width:150px;\">" + "<input value=\"" + data[i].Id + "\" name=\"Item\" type=\"checkbox\" />" + "</td><td style=\"width:300px;\">" + data[i].Name + "</td></tr>";
                                }
                            }
                        }
                        $("#trr").html(str);
                    }
                });
                $("#PublishmentSystemID").val(ui.item.value);
                return false;
            }
        });

        $("#BookingNo").dblclick(function () {
            $(this).autocomplete("search");
        });

        function OnOpen(event, ui) {
            var elem = $(event.target);
            var repItems = new Function("return " + elem.data("autocomplete").xhr.responseText)();
            if (repItems && repItems.length == 1) {
                var val = elem.val();
                if (CompareVal(repItems[0].label, val)) {
                    var mui = {};
                    mui.item = repItems[0];
                    elem.autocomplete("option", "select")(event, mui);
                    elem.autocomplete("close");
                }
            }
        }
    });
</script>
<script>
    //全选
    function checkAll() {
        var code_Values = document.all['Item'];
        if (code_Values.length) {
            for (var i = 0; i < code_Values.length; i++) {
                code_Values[i].checked = true;
            }
        } else {
            code_Values.checked = true;
        }
    }
    //全选、反选
    function CheckAllReverse(value, obj) {
        var form = document.getElementsByTagName("form")
        for (var i = 0; i < form.length; i++) {
            for (var j = 0; j < form[i].elements.length; j++) {
                if (form[i].elements[j].type == "checkbox") {
                    var e = form[i].elements[j];
                    if (value == "selectAll") {
                        e.checked = obj.checked
                    }
                    else {
                        e.checked = !e.checked;
                    }
                }
            }
        }
    }

</script>
@using (Html.BeginForm("Update_Node", "Node"))
{
    <h1>栏目类别</h1>
    <p>
        <label>网站名称:</label><input id="PublishmentSystemName" type="text" value="" class="auto-complete">
        <input id="PublishmentSystemID" type="hidden" value="">
    </p>
    <table class="normal tablesorter fullwidth">
        <thead style="display:block;">
            <tr>
                <th style="width:150px;">
                    <input id="btnOk" type="button" value="全选" οnclick="checkAll()" />
                    <input id="btnNo" type="button" value="反选" οnclick="CheckAllReverse()" />
                </th>
                <th style="width:300px;">名称
                </th>
            </tr>
        </thead>
        <tbody id="trr" style="height:500px;overflow:auto;display:block;">
        </tbody>
    </table>
    <input type="submit" value="保存" class="submit" />

}

后台代码

Controllers\NodeController

 public ActionResult List()
        {
            return View();
        }

        public ActionResult GetData(string term)
        {
            ResultMessage<object> query = busi.GetPublishmentSystem(term);
            return Json(query.Data, JsonRequestBehavior.AllowGet);
        }

        public JsonResult Grid_Node(FormCollection collection)
        {
            int strid = Convert.ToInt32(Request.Form["id"].ToString());
            ResultMessage<object> query = busi.GetNodeList(strid);
            return Json(query.Data, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 批量修改
        /// </summary>
        /// <param name="collection"></param>
        public ActionResult Update_Node(FormCollection collection)
        {
            string chkValues = Request.Form["item"];
            ResultMessage<object> query = busi.Update_Node(chkValues);
            return RedirectToAction("index");
        }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值