如百度一样的搜索智能提示(显示数据库的数据)

1、body部分

 1 <body>  
 2     <form id="form1" runat="server"> 
 3      
 4     <div  style="margin-left:450px">
 5    
 6         <asp:TextBox ID="txtCode"  Width="148px" onkeyup="SelectTip()"   runat="server"></asp:TextBox><br />  
 7         
 8         <div id="divShowText" style=" 150px;"></div><br />
 9         
10   </div>
11     </form>  
12 </body>

2、jquery 部分

 1  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>  
 2     <script type="text/javascript">
 3 
 4         $(document).ready(function () {
 5 
 6             $("li").live("click", function () {
 7                 $("#txtCode").val($(this).text());
 8                
 9                 $("#divShowText").html("");
10             })
11 
12             $("li").live({
13                 mouseenter: function () {
14                     $(this).css("background-color", "gray"); //鼠标移入事件  
15                 },
16                 mouseleave: function () {
17                     $(this).css("background-color", "white"); //鼠标移出事件  
18                 }
19             });
20         });
21 
22         $(document).ready(function () {
23             setInterval("startRequest()", 100);
24         });
25         function startRequest() {
26             document.URL = location.href;
27         }
28 
29         //Ajax请求
30         function SelectTip() {
31             var temp = $("#txtCode").val();
32             if (temp == "" || temp == null) {
33                 $(divShowText).html("");
34             }
35             else {
36                 $.ajax({
37                     type: "post",
38                     url: "MusicHandler.ashx?methodType=code",//要跳转的中性方法的页面
39                     data: { code: temp, methodType: "code" },//参数
40                     success: function (result) {
41                         $(divShowText).html("");
42                         $(divShowText).html(result);
43                     },
44                     //请求执行异常执行的方法  
45                     error: function (XMLHttpRequest, textStatus, errorThrown) {
46                         //alert(XMLHttpRequest.status);
47                         $(divShowText).html("");
48                         $(divShowText).html("<lable color='red'>异常，请关闭页面重试，或联系管理员</lable>");
49                     }
50                 });
51             }
52         }          
53 
54     </script>

3、Stytle样式

 1 <style type="text/css">  
 2         li {  
 3             text-decoration: none;  
 4             display: block;                      
 5             list-style: none;  
 6             cursor: pointer;  
 7             padding: 0px;  
 8             margin: 0px;  
 9         }  
10   
11         ul {            
12             display: block;  
13             list-style: none;  
14             margin: 0px;  
15             padding: 0px;  
16         }      
17     </style>

4、MusicHandler.ashx 一般处理程序页面

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;

namespace Combobox
{
    /// <summary>
    /// MusicHandler 的摘要说明
    /// </summary>
    public class MusicHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string html = "";
      
            //在这里，参数获取方式为context.Request.Params["methodType"].ToString()  
            switch (context.Request["methodType"].ToString())
            {
                case "code":
                    html = CodeHandler(context.Request.Params["code"].ToString());
                    break;
                case "user":
                    break;
            }
            context.Response.Write(html);
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        //把数据库的数据读出并转换成 List<string>
        public List<string> GetData(string mname)
        {
            string sql = "SELECT name FROM MusicInfo_Table where name like '%" + mname + "%'";
            string connectionString = "Data Source=.;Initial Catalog=MusicDataBase;User ID=sa;Password=manager";
            SqlConnection conn = new SqlConnection(connectionString);
            conn.Open();
            SqlCommand cmd = new SqlCommand(sql, conn);

            SqlDataReader dr = cmd.ExecuteReader();
            //MusicInfo_Table 是表的实例类
            List<MusicInfo_Table> list = new List<MusicInfo_Table>();
            while (dr.Read())
            {
                MusicInfo_Table mt = new MusicInfo_Table();
                mt.Name = dr["name"].ToString();
                list.Add(mt);
            }
            List<string> list1 = new List<string>(list.Count);
            for (int i = 0; i < list.Count; i++)
            {
                list1.Add(list[i].Name.ToString());
            }
            conn.Close();
            return list1;

        }

        //把读出的数据显示成下拉框模式
        public string CodeHandler(string code)
        {
            List<string> list = GetData(code);//请将此处理解为：向数据库请求和以当前参数开头的所有数据，返回为字符串列表  
            string html = "<ul>";
            foreach (string temp in list)
            {
                html = html + "<li>" + temp + "</li>";
            }
            html = html + "</ul>";
            return html;
        }
    }
}