我想模擬google自動完成功能 基本的功能實現了,現在我想添加鍵盤按鈕事件,用鍵盤的上下按鈕控制,求高手续写?前台
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="EtsBBS_Default2" %><!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> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript">
$(document).ready(function(){
$("#searchTxt").keyup(function(event){
$("#divShow").remove(); //清空上次div裏面的內容
var searchTxt=$("#searchTxt").val();//獲取文本框的值
var divLeft=$(this).offset().left;
var divTop=$(this).offset().top+22;
var htmlDiv="<div id='divShow' style='display:none;left:"+divLeft+"px;top:"+divTop+"px;position:absolute;width:153px;z-index:1000;border:1px solid #558BE3;overflow:hidden'></div>"
$.ajax({
type:"POST",
url:"DataBase.aspx?keys="+encodeURIComponent(searchTxt)+"&Event=strs",
data:null,
success:function(mes)
{
if(mes=="")
{
$("#divShow").hide();//當mes的值為空時就不彈出div
}
else
{
$(document.body).append(htmlDiv);
$("#divShow").show();
$("#divShow").append(mes);
//給彈出到層加上效果
$("#divShow").find(".cl").each(function()
{
$(this).mouseover(function(){$(this).css("background-color","#C6D6F0").siblings().css("background-color","");})
.click(function(){$("#searchTxt").val( $(this).html());});///層裏面的值付給文本框
});
}
}//success end;
});//ajax
})//keyup end
})
//鼠標點擊其他地方隱藏彈出的層
document.onclick=function(e){
var e=e?e:window.event;
var tar = e.srcElement||e.target;
if(tar.tagName.toLowerCase()!="searchTxt"&&tar.tagName.toLowerCase()!="divShow"){
$("#divShow").css("display","none")
}
}
</script></head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="searchTxt" />
</div>
</form>
</body>
</html>
处理页面
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["Event"] == "strs")
{
string userName = string.Empty;
string searchText = Request.QueryString["keys"];
if (searchText != "")
{
string sql = "select user_name from mdsets_bbs_users where user_name like '" + searchText + "%'";
StringBuilder sb = new StringBuilder();
OleDbDataReader reader = OracleHelper.ExecuteReader(OracleHelper.ConnString, CommandType.Text, sql, null);
string divId = "d";
while (reader.Read())
{
sb.Append("<div class='cl' id=" + divid + ">" + reader["user_name"] + "</div>");
}
Response.Write(sb);
reader.Close(); }
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="EtsBBS_Default2" %><!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> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript">
$(document).ready(function(){
$("#searchTxt").keyup(function(event){
$("#divShow").remove(); //清空上次div裏面的內容
var searchTxt=$("#searchTxt").val();//獲取文本框的值
var divLeft=$(this).offset().left;
var divTop=$(this).offset().top+22;
var htmlDiv="<div id='divShow' style='display:none;left:"+divLeft+"px;top:"+divTop+"px;position:absolute;width:153px;z-index:1000;border:1px solid #558BE3;overflow:hidden'></div>"
$.ajax({
type:"POST",
url:"DataBase.aspx?keys="+encodeURIComponent(searchTxt)+"&Event=strs",
data:null,
success:function(mes)
{
if(mes=="")
{
$("#divShow").hide();//當mes的值為空時就不彈出div
}
else
{
$(document.body).append(htmlDiv);
$("#divShow").show();
$("#divShow").append(mes);
//給彈出到層加上效果
$("#divShow").find(".cl").each(function()
{
$(this).mouseover(function(){$(this).css("background-color","#C6D6F0").siblings().css("background-color","");})
.click(function(){$("#searchTxt").val( $(this).html());});///層裏面的值付給文本框
});
}
}//success end;
});//ajax
})//keyup end
})
//鼠標點擊其他地方隱藏彈出的層
document.onclick=function(e){
var e=e?e:window.event;
var tar = e.srcElement||e.target;
if(tar.tagName.toLowerCase()!="searchTxt"&&tar.tagName.toLowerCase()!="divShow"){
$("#divShow").css("display","none")
}
}
</script></head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="searchTxt" />
</div>
</form>
</body>
</html>
处理页面
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["Event"] == "strs")
{
string userName = string.Empty;
string searchText = Request.QueryString["keys"];
if (searchText != "")
{
string sql = "select user_name from mdsets_bbs_users where user_name like '" + searchText + "%'";
StringBuilder sb = new StringBuilder();
OleDbDataReader reader = OracleHelper.ExecuteReader(OracleHelper.ConnString, CommandType.Text, sql, null);
string divId = "d";
while (reader.Read())
{
sb.Append("<div class='cl' id=" + divid + ">" + reader["user_name"] + "</div>");
}
Response.Write(sb);
reader.Close(); }
}
}
解决方案 »
- 控件的使用
- 导出Excel时出现Exception from HRESULT: 0x800A03EC的错误!
- 这个问题对我来说挺难的,望好心人帮忙看看怎么实现
- 这样的功能应该需要怎么样的网站系统好呢
- Dataset问题 急!!!作业!
- “对没有标记为安全的ActiveX控件进行初始化和脚本运行”设置为“启用”后不能正常显示
- DataList 分隔符问题
- 关于输入年份得出每个月的星期六日天数的问题.谢谢!
- Asp.net如何写一个像CSDN结贴这样的页面啊? 顶者有分!~~
- 用"*"分开的邮件地址列表,如何在程序中限定
- 如何用ASP.NET的 BUTTON 后台关闭jQuery.boxy的弹出iframe窗口?
- asp.net问题
DOWN: 40,