类似谷歌的搜索的案例

最新推荐文章于 2024-08-25 09:57:22 发布

iteye_2688

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量80

点赞数

文章标签： javascript ui ViewUI

自己做了个类似谷歌的搜索的案例

总结: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

iteye_2688

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似谷歌的搜索的案例

自己做了个类似谷歌的搜索的案例总结:ajax传值，做个隐藏的div,监听键盘事件贴出代码，方便没有思路的看看vb.net的项目前台页面代码：&lt;%@ Page Language="vb" AutoEventWireup="false" Codebehind="googleFind.aspx.vb" Inherits="HIG_Receipt.go...
复制链接

扫一扫