[原创]搜索智能提示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();
    }

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