1、Body部分
1 <body> 2 <form id="form1" runat="server"> 3 <div style="margin-left:450px"> 4 文本框：<input type="text" id="TextValues" onchange=" SelectSemesterBySchYear()" onkeyup="SelectTip()" style="150px" runat="server"/> 5 6 7 下拉框：<select id="ddlValue2" runat="server" disabled="disabled" style="150px"> 8 <option value="">--请选择--</option> 9 </select><br /> 10 <div id="divtxtSelect" class="div_01"></div> 11 12 </div> 13 </form> 14 </body>
2、JQuery部分
1 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 2 <script type="text/javascript"> 3 $(document).ready(function () { 4 $("li").live("click", function () { 5 6 $("#TextValues").val($(this).text()); 7 8 $("#divtxtSelect").html(""); 9 }) 10 11 $("li").live({ 12 mouseenter: function () { 13 $(this).css("background-color", "gray"); //鼠标移入事件 14 }, 15 mouseleave: function () { 16 $(this).css("background-color", "white"); //鼠标移出事件 17 } 18 }); 19 }); 20 21 //Ajax请求智能搜索提示 22 function SelectTip() { 23 var temp = $("#TextValues").val(); 24 if (temp == "" || temp == null) { 25 $(divtxtSelect).html(""); 26 } 27 else { 28 $(".div_01").css("display", "block"); 29 $.ajax({ 30 type: "post", 31 url: "MusicHandler.ashx?methodType=code", 32 data: { code: temp, methodType: "code" }, 33 success: function (result) { 34 $(divtxtSelect).html(""); 35 $(divtxtSelect).html(result); 36 }, 37 //请求执行异常执行的方法 38 error: function (XMLHttpRequest, textStatus, errorThrown) { 39 //alert(XMLHttpRequest.status); 40 $(divtxtSelect).html(""); 41 $(divtxtSelect).html("<lable color='red'>异常，请关闭页面重试，或联系管理员</lable>"); 42 } 43 }); 44 } 45 } 46 47 //Ajax請求 文本框聯動給下拉框獲取值 48 function SelectSemesterBySchYear() { 49 var temp1 = $("#TextValues").val(); 50 $.ajax({ 51 type: "get", 52 url: "SelectHandler.ashx?city=" + temp1, 53 success: function (strJson) { 54 var dataArray = eval(strJson); 55 $("#ddlValue2").empty();//清空以前的下拉框的值 56 $("#ddlValue2").prop("disabled", false);//让下拉框能用 57 for (var i = 0; i < dataArray.length; i++) { 58 $("#ddlValue2").append("<option value='" + dataArray[i].id + "'>" + dataArray[i].Information + "</option>"); 59 } 60 }, 61 error: function (XmlHttpRequest, textStatus, errorThrown) { 62 alert(XmlHttpRequest.responseText); 63 } 64 }); 65 } 66 67 </script>
3、Style 部分
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 18 .div_01{ 19 display:none; 20 150px; 21 height:100px; 22 margin-left:75px; 23 background-color:white; 24 } 25 </style>
4、SelectHandler.ashx 一般处理程序页面
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Data; 6 using System.Text; 7 using System.Web.Script.Services; 8 using System.Web.Services; 9 10 namespace Combobox 11 { 12 /// <summary> 13 /// SelectHandler 的摘要说明 14 /// </summary> 15 public class SelectHandler : IHttpHandler 16 { 17 18 public void ProcessRequest(HttpContext context) 19 { 20 context.Response.ContentType = "text/plain"; 21 //context.Response.Write("Hello World"); 22 string city = context.Request["city"].ToString(); 23 string sql = "select * from MusicInfo_Info where names like '%" + city + "%'"; 24 DataTable dt = DbHelper.Instance.CreateDataTable(CommandType.Text, sql); 25 string strJson = DataTableToJson("SemesterJson", dt); 26 context.Response.Write(strJson); 27 context.Response.End(); 28 } 29 30 public bool IsReusable 31 { 32 get 33 { 34 return false; 35 } 36 } 37 38 //将datatable数据转换成JSON数据的方法 39 public string DataTableToJson(string jsonName, DataTable dt) 40 { 41 42 StringBuilder Json = new StringBuilder(); 43 Json.Append("["); 44 if (dt.Rows.Count > 0) 45 { 46 for (int i = 0; i < dt.Rows.Count; i++) 47 { 48 Json.Append("{"); 49 for (int j = 0; j < dt.Columns.Count; j++) 50 { 51 Json.Append(dt.Columns[j].ColumnName.ToString() + ":"" + dt.Rows[i][j].ToString() + """); 52 if (j < dt.Columns.Count - 1) 53 { 54 Json.Append(","); 55 } 56 } 57 Json.Append("}"); 58 if (i < dt.Rows.Count - 1) 59 { 60 Json.Append(","); 61 } 62 } 63 } 64 Json.Append("]"); 65 return Json.ToString(); 66 } 67 } 68 }