文本框自动补全，ajax autoComplete

做网页方面的程序，经常需要用到文本框的自动补全功能，在网上找了一个ajax的autoComplete，还挺好用的。实现的功能是：在文本框输入文本，搜索数据库文本关键字自动补全文本框。

1、autoComplete的代码(其实是个js文件)，（注：该代码是在csdn论坛找到的，代码内又原作者信息）

/*
 *Author:sohighthesky
 *From:http://blog.csdn.net/sohighthesky  
 *Date:2009-11-14
 */
/*
 *textbox 指定要显示自动完成的方本框
 *options:参见代码中setOptions中的注释
 */
var autoComplete=function(textbox,options) {
    this.textbox=this.g(textbox);
    this.setOptions(options);
    this.init();
}
autoComplete.prototype={
    g:function(id) {return typeof(id)=="string"?document.getElementById(id):id;},
	ae:function(el,type,call) {
        if(el.addEventListener)el.addEventListener(type,call,false);
		else el.attachEvent("on"+type,call);
    },
	getPos:function(){//取元素坐标
	    var o=this.textbox;
		var x = 0, y = 0;
		do{x += o.offsetLeft; y += o.offsetTop;}
		while(o=o.offsetParent);
		return {'x':x,'y':y};
	},
	setOptions:function(options) {
	    this.options={
	        url:"search.ashx",//指定页面
	        urlstr:"keyword",//指定url参数
	        suggestAppend:true,//是否在选择时将值添加到文本框
	        isTextboxWidth:false,//默认使用样式表中的宽度，设置为true时，显示与文本框一样的宽度
	        beforeSubmit:function(val,textbox){},//返回false不提交,
	        submitBtn:null//指定要提交的按钮
	    };
		for(var o in options) {this.options[o]=options[o];}
    },
    initxhr:function() {
        this.xhr=false;
	    if(window.XMLHttpRequest) {
		    this.xhr=new XMLHttpRequest();// for IE7/+,Firefox,Opera,Chorme,Safari
	    } else {
		    try {this.xhr=new ActiveXObject("Msxml2.XMLHTTP");/*IE6+*/ } catch(ex) {}
	    }
    },
    ajax:function(){
        var o=this;  
        if(!o.xhr)return;
        try {o.xhr.abort();}catch(ex){}
              
        o.xhr.onreadystatechange=function(){
            if(o.xhr.readyState==4 && o.xhr.status==200) {
                //o.layer.style.display="block";
                o.ii=-1;
                o.layer.innerHTML=o.xhr.responseText;
                var list=o.layer.getElementsByTagName("li");
                var len=list.length;
                o.layer.style.display=(len==0?"none":"block");
                for(var i=0;i<len;i++) {
                    (function(i){
                        var cur=list[i];
                        cur.οnmοuseοver=function() {
                            if(o.ii==-1)
                                o.textbox.setAttribute("txt",o.textbox.value);
                            if(o.last)
                                o.last.className="";
                            this.className="selected";
                            if(o.options.suggestAppend)
                                o.textbox.value=this.innerHTML;
                            o.last=this;
                            o.ii=i;
                        }
                        cur.οnclick=function() {
                            o.submit();
                        }
                    })(i);
                }
            }
        };
        var url=o.options.url+"?"+o.options.urlstr+"="+escape(o.getValue());
        o.xhr.open('GET',url,true);
        o.xhr.setRequestHeader("If-Modified-Since","0");//禁用IE缓存，如果你看到这一行，请删除
        o.xhr.send(null);
    },
    showSuggest:function(e) {
        if(e.keyCode==13 || e.keyCode==27 || (e.keyCode>=35 && e.keyCode<=40))return;
        var pos=this.getPos();
        with(this.layer.style){left=pos.x+"px";top=(this.textbox.offsetHeight+pos.y+1)+"px";}//定位
        
        if(this.getValue().length==0){this.hide();return;}//文本为空时返回
        this.ajax();
    },
    hide:function() {
        this.layer.style.display="none";
    },
    getValue:function() {
        return this.textbox.value.replace(/(^\s+)|(\s+$)/g,"");
    },
    keyDown:function(e) {
        var k=e.keyCode;
        var list=this.layer.getElementsByTagName("li");
        var len=list.length;
        if(k==13) {
            this.submit();
            if(e.preventDefault)e.preventDefault(); else e.returnValue=false;//取消默认提交
        } else if(k==27){
            if(this.layer.style.display!="none") {
                this.layer.style.display="none";
                this.textbox.value=this.textbox.getAttribute("txt");
                this.ii=-1;
            }
        } else if((k==38 || k== 40) && len>0) {
            if(this.layer.style.display=="none")
                return;
            if(this.ii==-1)
                this.textbox.setAttribute("txt",this.textbox.value);
            if(k==38) {
                this.ii--;
                if(this.ii==-1)
                    this.ii=len-1;
            }else if(k==40) {
                this.ii++;
                if(this.ii==len)
                    this.ii=0;
            } 
            if(this.last)
                this.last.className="";           
            list[this.ii].className="selected";
            if(this.options.suggestAppend)           
                this.textbox.value=list[this.ii].innerHTML;            
            this.last=list[this.ii];
        }
    },
    submit:function() {
        if(this.ii!=-1)
            this.textbox.value=this.layer.getElementsByTagName("li")[this.ii].innerHTML;
        this.hide(); 
        if(this.options.beforeSubmit(this.getValue(),this.textbox)!=false) {
            if(typeof(__doPostBack)!="undefined") {
                __doPostBack(this.options.submitBtn,"");
            } else {
                var form=this.textbox.form;
                var target=document.createElement("input");
                target.value=this.options.submitBtn;
                target.name="__EVENTTARGET";
                form.appendChild(target);
                var arg=document.createElement("input");
                arg.name="__EVENTARGUMENT";
                form.appendChild(arg);
                form.submit();
            }
        }
    },
    init:function() {
        this.layer=document.createElement("div");
        this.layer.className="autoSuggest";
        this.hide();
        if(this.options.isTextboxWidth)
            this.layer.style.width=this.textbox.offsetWidth+"px";
        document.body.appendChild(this.layer);
        
        this.textbox.setAttribute("autocomplete","off");
        
        var o=this;
        o.ae(o.textbox,"keydown",function(event){o.keyDown.call(o,event)});
        o.ae(o.textbox,"keyup",function(event){o.showSuggest.call(o,event);});
        o.ae(o.textbox,"blur",function(){o.hide.call(o)});
        
        this.initxhr();
        this.ii=-1;
    }
}

2、新建一个处理程序文件(.ashx文件)，DB是我的一个数据库操作类，这个处理程序的主要目的是读取数据库的数据，并显示。

<%@ WebHandler Language="C#" Class="coustmer" %>

using System;
using System.Web;

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

        string keyword = context.Request.QueryString["keyword"];
        if (string.IsNullOrEmpty(keyword)) return;

        string sql = string.Format("select top 10 cID from loads where cID like '%{0}%'", keyword);
        DB db = new DB();
        db.Open();
        db.getSqlreader(sql);

        System.Text.StringBuilder str = new System.Text.StringBuilder();

       
        if (db.m_rdr.HasRows)
        {
            
            str.Append("<ul>");
            while (db.m_rdr.Read())
            {
                str.AppendFormat("<li>{0}</li>", db.m_rdr["cID"]);
                
        }str.Append("</ul>");
            db.Close();
            
        }
        
        context.Response.Write(str.ToString());
    }
 
    
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

3、页面代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!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>

   
   <style type="text/css">

	
	 /****autoComplete自动完成样式*****/
    .autoSuggest { width:300px;position:absolute;z-index:999;border:solid 1px #666666;background-color:#FFFFFF; }
    .autoSuggest ul { margin:0;padding:0;list-style-type:none; }
    .autoSuggest li { padding-left:5px;line-height:21px;cursor:pointer;height:21px;overflow:hidden; }
    .autoSuggest .selected { background-color:#3366CC;color:#FFFFFF; }
</style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    
    </div>
    </form>
</body>

<script src="autoComplete.js" type="text/javascript"></script>
<script type="text/javascript">
    new autoComplete("TextBox1", {
        //submitBtn: "Button2", //指定提交的按钮，如果不提交请使用下面的方法取出值并返回false;
        beforeSubmit: function(val, textbox) { return false },
        suggestAppend: true
    });
</script>
</html>

最终效果：