一、效果图：

       

 

二、实现过程:

     思路：

     

 

三、部分代码:

      html:

     
        
      
       
      
        
      
       Google
      
    
     
    
     

     css代码：

1 * { 2     padding:0px; 3     margin:0px; 4 } 5  6 #searchbox { 7     margin-top:10px; 8     height:37px; 9     width:550px;10 }11 #searchbox div {12     float:left;13 } 14 #txtTitle {15    height:35px;16    width:440px;17    line-height:35px;18    border:solid 1px #4791FF;19 }20 #btnSelect a{21    width:100px;22    height:37px;23    background:#167ED9;24    display:block;25    line-height:37px;26    color:#ffffff;27    text-align:center; 28 }29 a:link {30     text-decoration:none;31 }32 a:hover {33     cursor:pointer;34 }35 #dtitles {36     width:540px;37     height:90px;38     border:solid 1px #CCCCCC;39     display:none;40     font-size:12px;41 }42 .li1 {43     background:#F0F0F0;44 }

     js代码：

1 $(function () 2 { 3     //1.页面加载之后，找到文本框的内容对它触发一个事件 4     $("#txtTitle").keyup(function () 5     { 6         //2.获取到文本框的内容,注意去空格 7         var title = $.trim($("#txtTitle").val()); 8         //3.获取到输入的内容之后，就要通过ajax传给后台 9         $.post("/Handler3.ashx", { "title": title }, function (data)10         {11             if (title == "") {12                 $("#dtitles").hide();13             }14             else15             {16                 //显示展示div,把它清空17                 $("#dtitles").show().html("");18                 if (data == "") {19                     $("#dtitles").text("没有相关数据!");20                 }21                 else {22                     $("#dtitles").append(data);23                     //4.鼠标移上去之后，加一个背景24                     $("li").hover(function ()25                     {26                         $(this).addClass("li1");27                     }, function ()28                     {29                         $(this).removeClass("li1");30                     });31                 }32             }33         });34     });35 });

    ajax:

1 public void ProcessRequest(HttpContext context) 2         { 3            //1.提交过来之后，我们要接收 4             string title=context.Request.Form["title"]; 5             //2.得到一个sql语句 6             string strsql = string.Format("select top 5 title from RNews where Title like '%{0}%' ",title); 7             //3.那得到sql怎么去做处理？ 8             DataTable dt = SqlHelper.ExecuteDataSetText(strsql,null).Tables[0]; 9             //4.我们最后要返回的是一个列表,要做字符串拼凑10             StringBuilder sb = new StringBuilder();11             //4.1判断得到的sql结果里面是否有数据12             if (dt.Rows.Count > 0)13             {14                 //4.1.115                 sb.Append("
     
      ");16                 for (int i = 0; i < dt.Rows.Count; i++)17                 {18                     sb.Append(string.Format("
      
{0}
", dt.Rows[i][0].ToString()));19                 }20                 sb.Append("
     
");21             }22             context.Response.Write(sb.ToString());23         }