auto.js

用Ajax实现自动补全,仿GOOGLE SUGGEST

//使用封装方法的人只关心提供http的请求方法，url地址，数据，成功和失败的回调方法

//类的构造定义，主要职责就是新建出XMLHttpRequest对象
var MyXMLHttpRequest = function() {
    var xmlhttprequest;
    if (window.XMLHttpRequest) {
        xmlhttprequest = new XMLHttpRequest();
        if (xmlhttprequest.overrideMimeType) {
            xmlhttprequest.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
        var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0 ; i < activeName.length; i++) {
            try{
                xmlhttprequest = new ActiveXObject(activeName[i]);
                break;
            } catch(e) {

            }
        }
    }
    if (xmlhttprequest == undefined || xmlhttprequest == null) {
        alert("XMLHtttpRequest对象创建失败！！");
    } else {
        this.xmlhttp = xmlhttprequest;
    }
}
//用户发送请求的方法
MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback) {
    if (this.xmlhttp != undefined && this.xmlhttp != null) {
        method = method.toUpperCase();
        if (method != "GET" && method != "POST") {
            alert("HTTP的请求方法必须是GET或POST！！");
            return;
        }
        if (url == null || url == undefined) {
            alert("HTTP的请求地址必须设置！");
            return;
        }
        var tempxmlhttp = this.xmlhttp;
        this.xmlhttp.onreadystatechange = function() {
            if (tempxmlhttp.readyState == 4) {
                if (tempxmlhttp.status == 200) {
                    var responseText = tempxmlhttp.responseText;
                    var reponseXML = tempxmlhttp.responseXML;
                    if (callback == undefined || callback == null) {
                        alert("没有设置处理数据正确返回的方法！");
                        alert("返回的数据：" + responseText);
                    } else {
                        callback(responseText,reponseXML);
                    }
                } else {
                    if (failback == undefined || failback == null) {
                        alert("没有设置处理数据返回失败的处理方法！");
                        alert("HTTP的响应码：" + tempxmlhttp.status + ",响应码的文本信息：" + tempxmlhttp.statusText);
                    } else {
                        failback(tempxmlhttp.status,tempxmlhttp.statusText);
                    }
                }
            }
        }
        //解决缓存的转换
        if (url.indexOf("?") >= 0) {
            url = url + "&t=" + (new Date()).valueOf();
        } else {
            url = url + "?t=" + (new Date()).valueOf();
        }

        //解决跨域的问题
        if (url.indexOf("http://") >= 0) {
            url.replace("?","&");
            url = "Proxy?url=" + url;
        }

        this.xmlhttp.open(method,url,true);

        //如果是POST方式，需要设置请求头
        if (method == "POST") {
            this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        }

        this.xmlhttp.send(data);
    } else {
        alert("XMLHtttpRequest对象创建失败，无法发送数据！");
    }
}
MyXMLHttpRequest.prototype.abort = function() {
    this.xmlhttp.abort();
}



/*

//加入需要使用我的封装，可以使用如下代码
var xmlhttp = new MyXMLHttpRequest();
xmlhttp.send("GET","AJAXServer?name=123",null,callback,faliback);

 */




var textNode;
var popupNode;
//保存文本框中本次事件之前的内容
var lastTextValue;
//记录当前高亮节点的索引值
var highLightIndex = -1;
//延时操作的id
var timeoutId 
window.onload=init;
//页面初始化执行的方法
function init() {
    //找到页面中的两个反复使用的元素节点
    textNode = document.getElementById("autotext");
    popupNode = document.getElementById("popup");
            
    //控制弹出框的位置
    //先找到文本框的位置
    var left = textNode.offsetLeft;
    var top = textNode.offsetTop;
    var parent = textNode.offsetParent;
    while(parent) {
        left += parent.offsetLeft;
        top += parent.offsetTop;
        parent = parent.offsetparent;
    }
    //控制弹出框的显示位置和宽度
    popupNode.style.left = left + "px";
    popupNode.style.top = top + textNode.offsetHeight + "px";
    popupNode.style.width = textNode.offsetWidth + "px";
    //这里没有控制弹出框的高度,复杂例子的话，一种方式可以控制服务器端回传的数据量，另一种方式就是直接控制弹出框的高，并且让它可以显示滚动条
            
}
//处理键盘按下再弹起时的事件
function completeText(event) {
    //为了判断键盘当前是那个键按下后弹起，我们需要确定当前键盘按键的内容
    //针对不同的浏览器，来获取event对象     
    var myevent = window.event || event;
    var textValue = textNode.value;
    //获取当前弹起的键盘按键所对应的键码
    var keyCode = myevent.keyCode;
    if (keyCode >= 48 && keyCode <= 90 || keyCode == 8 || keyCode == 46 || textValue!=""|| textValue!=null ) {
        //字母，数字，退格键，删除按下的时候，需要将当前文本框中的内容送到服务器端，获得可以补全用的单词
        //需要获取当前文本框中的内容
        textValue = textNode.value;     
        if (textValue == ""){
            //不需要和服务器进行交互
            //需要清除弹出框的内容
            clearPopup();
        } else if (textValue != lastTextValue){
            //先把上一次的延时操作清除
            clearTimeout(timeoutId);
            //利用setTimeout,它可以延时执行我的一个方法
            timeoutId = setTimeout(function(){
                var xmlhttp = new MyXMLHttpRequest();
                textValue=  encodeURI(encodeURI(textValue));              
                xmlhttp.send("POST", "AutoComplete.aspx", "word=" +textValue,callback, failback);
            },500);
        }
        lastTextValue = textValue;
        //alert("字母，数字，退格或删除被按下");   
    }
    if(keyCode==38||keyCode==40){
           //按上下键选择被补全出来的内容
           moveHighLight(keyCode);
    }
    if( keyCode == 13 ){
           //如果按下回车键，弹出框中有内容被选中时，则把弹出框中的内容补全文本框，如果没有被选中，就给出一个提示信息表式需要提交数据
           if (highLightIndex != -1) {
              //表式弹出框有内容被选中
              var word = popupNode.childNodes[highLightIndex].firstChild.nodeValue;
              textNode.value = word;
              lastTextValue = word;
              clearPopup();
              highLightIndex = -1;
           } else {
            //弹出框没有内容被选中
              alert("文本框中的内容：" + textNode.value + "被提交");              
              clearPopup();
           }        
     }        
}
        
//处理键盘上下键事件的方法
function moveHighLight(keyCode) {
    var divNodes = popupNode.childNodes;
    var length = divNodes.length;
    if (length > 0) {
        //只要在弹出框中有内容，并且显示出来的时候才进行处理
        if (keyCode == 38) {
            //向上键按下
            if (highLightIndex != -1) {
                //表式当前已经有节点被高亮
                divNodes[highLightIndex].style.backgroundColor = "white";                
            }
            highLightIndex--;
            if (highLightIndex < 0) {
                highLightIndex = length - 1;
            }
            divNodes[highLightIndex].style.backgroundColor = "#3366CC";                    
        } else if (keyCode == 40) {
            //向下键按下
            if (highLightIndex != -1) {
                //表式当前已经有节点被高亮
                divNodes[highLightIndex].style.backgroundColor = "white";
            }
            highLightIndex++;
            if (highLightIndex > length - 1) {
                highLightIndex = 0;
            }
            divNodes[highLightIndex].style.backgroundColor = "#3366CC";
        }
    }
}
        
//处理服务器端数据返回的方法
function callback(reponseText, responseXML) {
    var rootElement;
    if (responseXML != null && (rootElement = responseXML.documentElement) != null
        && rootElement.nodeName == "words") {
        //保证响应的XML存在，并且解析正确
        //首先要获取所有的单词
        var words = rootElement.getElementsByTagName("word");
        var length = words.length;
        if (length > 0) {
            //先清除之前的内容
            popupNode.innerHTML = "";
            //重新初始化高亮的索引值
            highLightIndex = -1;
            for (var i = 0; i < length; i++) {
                //取到单词的内容
                var wordValue = words[i].firstChild.nodeValue;
                var divNode = document.createElement("div");
                //定义div节点的id属性为当前的索引值
                divNode.id = i;
                divNode.innerHTML = wordValue;
                //给div节点增加鼠标进入，鼠标离开，鼠标点击的事件
                divNode.onmouseover = function() {
                    if (highLightIndex != -1) {
                        popupNode.childNodes[highLightIndex].style.backgroundColor = "white";
                    }
                    //this表式的就是divNode，当前节点变成高亮
                    this.style.backgroundColor = "#3366CC";
                    highLightIndex = this.id;
                }
                divNode.onmouseout = function() {
                    popupNode.childNodes[highLightIndex].style.backgroundColor = "white";
                    highLightIndex = -1;
                }
                divNode.onclick = function() {
                    //高亮节点的文本内容添加到文本框中
                    textNode.value = this.firstChild.nodeValue;
                    lastTextValue = textNode.value;
                    highLightIndex = -1;
                    clearPopup();
                    //让文本框重新获得焦点
                    textNode.focus();
                }
                popupNode.appendChild(divNode);
            }
            //让弹出框显示出来
            popupNode.style.display = "block";
        } else {
            //没有单词返回，清除弹出框
            clearPopup();
        }
        //alert(rootElement.nodeName);
    } else {
        //没有单词返回，清除弹出框
        clearPopup();
    }
}
//处理与服务器交互失败的方法
function failback(status, statusText) {
    //清除弹出框的内容
    clearPopup();
}
        
//用于清除弹出框的内容
function clearPopup(){
    popupNode.innerHTML = "";
    popupNode.style.display = "none";
}