您的位置:首页 > Web前端 > JQuery

jquery.autocomplete自动提示

2013-11-15 15:51 232 查看
前台代码

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="全选" onclick="checkAll()" />
<input id="btnNo" type="button" value="反选" onclick="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");
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: