如何做类似google的Textbox的AutoComplete增强版,可以显示多列

下载Prototype,和 Ajax Autocomplete for Prototype 2个js文件

/*
 *
 *  Ajax Autocomplete for Prototype, version 1.0.3
 *  For details, see the web site: http://www.devbridge.com/projects/autocomplete/
 *
 */

下面用一个例子说明: 用户在textbox输入员工编号,就会出現员工编号,姓名的autocomplete

<asp:TextBox ID="txtEmployeeNum" runat="server" MaxLength="50"  TabIndex="12"
 Width="130px"></asp:TextBox>    
<script type="text/javascript">
  new Autocomplete('txtEmployeeNum', { serviceUrl:'../service/Employee.ashx', 
         onSelect: function(value, data){
        $("txtEmployeeNum").value= data;
        var arr = value.split(" ");
        $("txtEmployeeName").value = arr[0];  
      }
 });
</script> 

 

Ajax 需要从后台拿到数据庫员工的数据,后台页面就是Employee.ashx.

ashx会只生成所需的数据,而没有多余的html

 

 

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class Employee : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

　　　　//用户在textbox输入的字符,在Request["query"]里
            string query = context.Request["query"];
            EmployeeParas paras = new EmployeeParas();
            paras.employeeNum = query;
            paras.employeeName = query;

            EmployeeHandler eh = new EmployeeHandler();
            List<Employee> Emplist = eh.LoadEmployeeByParasForAJAX(paras);

            string JSON = string.Empty;
            JSON = "{ query:'" + query + "',suggestions:[";
            if (Emplist.Count > 0)
            {
                foreach (Employee item in Emplist)
                {
                    JSON += "'" + item.employeeName + "      " + item.employeeNum + "',";
                }
                //del last commar
                JSON = JSON.Substring(0, JSON.Length - 1);

            }

            JSON += "],data:[";
            if (Emplist.Count > 0)
            {
                foreach (Employee item in Emplist)
                {
                    JSON += "'" + item.employeeNum + "',";
                }
                //del last commar
                JSON = JSON.Substring(0, JSON.Length - 1);
            }
            JSON += "]}";
            context.Response.Write(JSON);

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }