自己做了个类似谷歌的搜索的案例
总结:ajax传值,做个隐藏的div,监听键盘事件
贴出代码,方便没有思路的看看
vb.net的项目
前台页面代码:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="googleFind.aspx.vb" Inherits="HIG_Receipt.googleFind" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>googleFind</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script type="text/javascript" src="Jquery/jquery-1.8.3.min.js" />
<script type="text/javascript" language="javascript">
</script>
</HEAD>
<body MS_POSITIONING="GridLayout" οnclick="cancel();">
<form id="Form1" method="post" runat="server">
<div>
<div id="text">
<input type="text" size="30" id="inputString" οnkeyup="up(this.value)" />
<input type="text" size="30" id="inputStringRoom" />
</div>
<div id="dd" style="border:1px;display:none">
</div>
</div>
</form>
<script type="text/javascript" language="javascript">
function $1(obj){
return document.getElementById(obj);
}
function cancel(){
var obj=document.elementFromPoint(event.clientX,event.clientY);
//alert(obj.id);
document.getElementById("dd").style.display="none";
}
function up(inputString){
if (event.keyCode!=13){
if(inputString.replace(/(^\s*)|(\s*$)/g, "").length==0){
document.getElementById("dd").style.display="none";
}else{
document.getElementById("dd").style.display="block";
ajaxpost(inputString);
}
}
}
//jquery的ajax传值post方法
function ajaxpost(inputString){$.post("divdata.aspx",{string:inputString},function(data,status){
document.getElementById("dd").innerHTML=data;
});
}
//span的点击事件
function div_click(obj){
$1("inputString").value=obj.children.item(0).innerText;
$1("inputStringRoom").value=obj.children.item(1).innerText;
}
//onmouseover事件
function mouseover(obj){
obj.style.background="#00B2EE";
}
//onmouseout事件
function mouseout(obj){
obj.style.background="";
}
//监听键盘的上键、下键、和回车键事件
var i=0;
function document.onkeydown(){
//按下上键
if (event.keyCode == 38){
//排除按下上键没有值得时候
if(document.getElementsByName('liid').length==0){
return;
}
//最后一列时归零
if(i==10){
i=0;
}
//每次按完上键时遍历一遍背景颜色
for(var k=0;k<document.getElementsByName('liid').length;k++){
document.getElementsByName("liid")[k].style.background="";
document.getElementsByName("liid2")[k].style.background="";
}
//处理选中的一条记录
document.getElementsByName("liid")[document.getElementsByName('liid').length-i-1].style.background="#00B2EE";
document.getElementsByName("liid2")[document.getElementsByName('liid').length-i-1].style.background="#00B2EE";
document.getElementById("inputString").value=document.getElementsByName("liid")[document.getElementsByName('liid').length-i-1].innerHTML;
document.getElementById("inputStringRoom").value=document.getElementsByName("liid2")[document.getElementsByName('liid').length-i-1].innerHTML;
i=i+1;
}
//按下下键
if (event.keyCode== 40){
//排除按下下键没有值得时候
if(document.getElementsByName('liid').length==0){
return;
}
if(i==1||i==0){
i=11;
}
for(var k=0;k<document.getElementsByName('liid').length;k++){
document.getElementsByName("liid")[k].style.background="";
document.getElementsByName("liid2")[k].style.background="";
}
document.getElementsByName("liid")[document.getElementsByName('liid').length-i+1].style.background="#00B2EE";
document.getElementsByName("liid2")[document.getElementsByName('liid').length-i+1].style.background="#00B2EE";
document.getElementById("inputString").value=document.getElementsByName("liid")[document.getElementsByName('liid').length-i+1].innerHTML;
document.getElementById("inputStringRoom").value=document.getElementsByName("liid2")[document.getElementsByName('liid').length-i+1].innerHTML;
i--;
}
//回车键
if (event.keyCode==13){
//排除在div隐藏和没有选中项的时候
if( document.getElementById("dd").style.display=="none"||i==0){
return;
}
document.getElementById("inputString").value=document.getElementsByName("liid")[document.getElementsByName('liid').length-i].innerHTML;
document.getElementById("inputStringRoom").value=document.getElementsByName("liid2")[document.getElementsByName('liid').length-i].innerHTML;
document.getElementById("dd").style.display="none"
}
}
</script>
</body>
</HTML>
后台处理代码:
Public Class divdata
Inherits System.Web.UI.Page
#Region " Web 窗体设计器生成的代码 "
'该调用是 Web 窗体设计器所必需的。
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
'注意: 以下占位符声明是 Web 窗体设计器所必需的。
'不要删除或移动它。
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: 此方法调用是 Web 窗体设计器所必需的
'不要使用代码编辑器修改它。
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'在此处放置初始化页的用户代码
Response.Expires = 0
Response.Clear()
Dim cusname As String = Request("string").Trim()
'查询数据
'调用存储过程 General_getcusroom
Dim conn As New SqlClient.SqlConnection(P_ConnectString)
Dim com As New SqlClient.SqlCommand("General_getcusroom", conn)
com.CommandType = CommandType.StoredProcedure
com.Parameters.Add(New SqlClient.SqlParameter("@cdepcode", ""))
com.Parameters.Add(New SqlClient.SqlParameter("@ccusname", cusname))
com.Parameters.Add(New SqlClient.SqlParameter("@roomname", ""))
com.Parameters.Add(New SqlClient.SqlParameter("@csys", "10102"))
com.Parameters.Add(New SqlClient.SqlParameter("@ifcusroom", "cus"))
Dim apt As New SqlClient.SqlDataAdapter
apt.SelectCommand = com
Dim tbl As New DataTable
Try
conn.Open()
apt.Fill(tbl)
Catch ex As Exception
Finally
If conn.State = ConnectionState.Open Then conn.Close()
End Try
''''
'Dim sql As String
'Dim tbl As DataTable
'Dim str As String = "select top(10)* from dbo.T_customer where ccusname like '" & aaa & "%'"
'tbl = Cls_common.ExecQuerySQL(str)
If tbl.Rows.Count <> 0 Then
For i As Int16 = 0 To 9
Response.Write("<span id='spanid' οnmοuseοut='mouseout(this);' οnmοuseοver='mouseover(this);' style='cursor: default' οnclick='div_click(this);'><span style='font-size:13px; width:100px;text-align:left' id='liid'>" + tbl.Rows(i).Item("ccusname") + "</span >")
Response.Write("<span id='liid2' style='font-size:13px;text-align:left' style='cursor: default' id='liidroom'>" + tbl.Rows(i).Item("croomname") + "</span ></span></br>")
Next
End If
Response.End()
End Sub
End Class