[原创]搜索智能提示AutoComplate.js

// -----------Create by sjett 2007-11-19----------------
 
     var  _outTime  =   3000 ;     // setTimeOut(function,outTime);
     var  inputObj  =   false ;              // current input text control
     var  setTimeOutId  =   false ;
     var  displayDiv  =   false ;         // display div
    
     function  autoComplate_Init(ObjId)
     {
        inputObj = document.getElementById(ObjId);
        _outTime = isNaN(parseInt(inputObj.getAttribute("outTime"))) ? _outTime : parseInt(inputObj.getAttribute("outTime"));
        
        autoComplate_InitEvent();               //init input control Event
        autoComplate_InitDisplayDiv();
    }
    
     function  autoComplate_InitEvent()
     {
        inputObj.onkeyup = autoComplate_ChangeEvent;  //onchange onpropertychange
        inputObj.onblur = autoComplate_DisposeEvent;
    }
    
     function  autoComplate_InitDisplayDiv()
     {
        var divHtml = '<div id="autoComplateList"></div>';
        document.write(divHtml);
        
        displayDiv = document.getElementById('autoComplateList');
        autoComplate_DisposeEvent();    //hiddern
        displayDiv.style.top = (inputObj.offsetTop + inputObj.offsetHeight) + "px";   //top,left
        displayDiv.style.left = inputObj.offsetLeft + "px";
        displayDiv.style.width = inputObj.offsetWidth + "px";   //height,width
    }

     function  autoComplate_ChangeEvent()
     {
        if (inputObj.value == '') {return;}
        if (setTimeOutId) 
            {clearTimeout(setTimeOutId);}
        setTimeOutId = setTimeout(function(){
        //这里做一些你想在Input控件的事件中处理事务

        autoComplate_GetData();
        } , _outTime);
    }
    
     function  autoComplate_DisposeEvent()
     {
        if (displayDiv)
        {
            displayDiv.style.visibility = 'hidden';
            displayDiv.style.display = 'none';
            
            displayDiv.innerHTML = '';             //clear
            setTimeOutId = false;
        }
    }
    
     function  autoComplate_DisplayDivShow()
     {
        if (displayDiv)
        {
            displayDiv.style.visibility = 'visible';
            displayDiv.style.display = 'block';
            
            setTimeOutId = false;
        }
    }
    
     function  autoComplate_DisplayDivOnRowOver()
     {
        eval('this.className = "autoComplateList-tr-over"');
    }
    
     function  autoComplate_DisplayDivOnRowOut()
     {
        eval('this.className = "autoComplateList-tr"');
    }
    
     function  autoComplate_DisplayDivOnClick()
     {
        inputObj.value = eval('this.innerHTML');
        autoComplate_DisposeEvent();
        
        
        //这里作一些当选中文本后想作的事,比如像google一样提交查询
    }
    
     function  autoComplate_DisplayDivSetRowsEvent()
     {
        for (var index=0; index<displayDiv.childNodes.length -1 ;index++ )
        {
            displayDiv.childNodes[index].onmouseover = autoComplate_DisplayDivOnRowOver;
            displayDiv.childNodes[index].onmouseout = autoComplate_DisplayDivOnRowOut;
            displayDiv.childNodes[index].onclick = autoComplate_DisplayDivOnClick;
        }
    }
    
     function  autoComplate_GetData()
     {
        var ajax = new sack();
        ajax.requestFile = "search.aspx?type=4&name=name";        //请求地址
        ajax.onCompletion = function(){ 
            var entities =  ajax.responseXML.getElementsByTagName("entity");
            if (entities.length <= 0) return;
                
            displayDiv.innerHTML = '';
            for(var index=0; index<entities.length; index++)
            {
                displayDiv.innerHTML += '<div class="autoComplateList-tr">' + entities[index].firstChild.getAttribute("value") + '</div>';
            }
            //Close Tag
            displayDiv.innerHTML += '<div class="" style="text-align:right;"><a href="#" onclick="autoComplate_DisposeEvent();">关闭</a></div>';
            //Add Event
            autoComplate_DisplayDivSetRowsEvent();
            //Show
            autoComplate_DisplayDivShow();
        };
        ajax.runAJAX();
    }

代码示例下载: http://files.cnblogs.com/sjett/autoComplate.rar

转载于:https://www.cnblogs.com/sjett/archive/2007/11/22/968026.html