jquery.combobox+ashx实现AutoComplete
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="comboboxTest2.aspx.cs" Inherits="comboboxdemo.comboboxTest2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link rel="Stylesheet" href="combobox/jquery.combobox.css" />
<script type="text/javascript" src="combobox/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="combobox/jquery.combobox.js"></script>
<script type="text/javascript">
$(function() {
//初始化所有combobox的外观
combobox.prototype.mustSelect = true;
combobox.prototype.init(".combos", "combobox/dropdown.gif");
//初始化combobox行为
var combo1 = new combobox("#<%=tb1.ClientID %>");//对tb1进行combobox行为
//后台或者数据源
$.get("comboboxHander.ashx", function(str) {
var arr = eval(str);
//alert(arr[0].id);
combo1.dataSource = arr;
});
//绑定
combo1.dataBind();
//选择事件
combo1.onSelected = function(jqdom) {
$("#<%=TextBox1.ClientID %>").val(jqdom.attr('id') + " " + jqdom.text());
}
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="tb1" runat="server" CssClass="combos"></asp:TextBox><br /><br />
<asp:TextBox ID="tb2" runat="server" CssClass="combos" Text="我是打酱油来的"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
</div>
</form>
</body>
</html>
View Code
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Script.Serialization; namespace comboboxdemo { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class comboboxHander : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; List<EntityClass> list = new List<EntityClass>(); for (int i = 1; i <= 100; i++) { EntityClass ec = new EntityClass(); ec.ID = "id_"+i.ToString(); ec.Name = "name_" + i.ToString(); list.Add(ec); } //序列化 JavaScriptSerializer jss = new JavaScriptSerializer(); string str= jss.Serialize(list.Select(p => new { id = p.ID, text = p.Name }).OrderBy(p=>p.id)); //返回 context.Response.Write(str); } public bool IsReusable { get { return false; } } } public class EntityClass { public string ID { set; get; } public string Name { set; get; } } }
