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="width: 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;
}
}
}
时间： 2024-08-30 08:06:47