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; } } }