本文介绍了一个使用ASP.NET和jQuery实现的简单用户名自动补全功能。该功能可根据用户输入的部分字符，从服务器获取匹配的用户名建议，并以列表形式展示。通过监听键盘输入事件，动态请求服务器获取数据，然后显示在界面上供用户选择。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryAjax_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.message
{
position:relative;
left:10px;
background-color:Gray;
width:150px;
margin:10px 0 0 160px;
border:1px soild Red;
}
.namelist
{
list-style:none;
margin:0px;
padding:0px;
}
.hover
{
background-color:Red;
color:Blue;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.message').hide();
$("#name").keyup(function () {
var name = $("#name").val();
var data = 'userName=' + name;
$.ajax({
type: "GET",
url: "Default.aspx",
data: data,
success: function (Msg) {
$('.message').show();
$('.namelist').html(Msg);
$('li').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
$('li').click(function () {
$('#name').val($(this).text());
$('.message').hide();
})
}
});
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label>Please Enter Your Name</label>
<input type="text" id="name" /><br />
</div>
<div class="message">
<div class="namelist">
</div>
</div>
</form>
</body>
</html>
StringBuilder StrName = new StringBuilder(); List<string> ListName = new List<string>(); protected void Page_Load(object sender, EventArgs e) { ListName.Add("huguo"); ListName.Add("guo"); ListName.Add("guoguo"); ListName.Add("ws_hgo"); if (Request.QueryString.Count != 0) { string name = Request.QueryString["userName"].ToString(); if (ListName.Contains(name)) { ListName.ForEach(GetNames); Response.Write(StrName.ToString()); } else { Response.Write("当前用户不存在！"); } Response.End(); } } public void GetNames(string name) { StrName.AppendFormat("<li>{0}</li>", name); }
StringBuilder StrName = new StringBuilder(); List<string> ListName = new List<string>(); protected void Page_Load(object sender, EventArgs e) { ListName.Add("huguo"); ListName.Add("guo"); ListName.Add("guoguo"); ListName.Add("ws_hgo"); if (Request.QueryString.Count != 0) { string name = Request.QueryString["userName"].ToString(); if (ListName.Contains(name)) { ListName.ForEach(GetNames); Response.Write(StrName.ToString()); } else { Response.Write("当前用户不存在！"); } Response.End(); } } public void GetNames(string name) { StrName.AppendFormat("<li>{0}</li>", name); }
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
