支持过滤,可输入select，，并能挡住select 的div

// js

 
function Suggest(){
    this.objParent = null; 
    this.cursor = -1;
    this.layerWidth = 200;
    this.result = 0;   
    this.keyword = null;
    this.startIndex = 0;
}

Suggest.prototype.Search = function(objParent ){     
    var This = this;
    this.CreateElement(objParent);
    this.keyword = this.objParent.value;//.replace(/(^/s*)|(/s*$)/g, "");    
 
    if(this.keyword != ""){
            this.MyFillResult(this.keyword);           
    }    
}
 
Suggest.prototype.MyFillResult = function(inputKey){
    this.result = 0;
    var findList = document.getElementById("findList");
    var findListArray = findList.getElementsByTagName("li");

    if(findListArray.length > 0){
        for(var i = findListArray.length - 1; i >= 0; i--){
            findList.removeChild(findListArray[i]);
        }
    }
    /*search by key*/
       var varValueArray = new Array();
    var varKeyArray = new Array();
    inputKey = inputKey.toLocaleUpperCase();
    for(var i=0;i<sfdcDefCodesKey.length;i++){
        var key = sfdcDefCodesKey[i];
      key = key.toLocaleUpperCase();
      if ( inputKey.length<= key.length ) {
          if ( key.substring(0,inputKey.length) == inputKey){
            varValueArray.push(sfdcDefCodesValue[i]);
             varKeyArray.push( sfdcDefCodesKey[i]);
        }
      }
    }   
    this.result = varKeyArray.length;   
    for(var i = 0; i < this.result; i++){
         
        var This = this;
        var findLI = document.createElement("li");
        findLI.id = "li" + i;
        findLI.cursor = i;
        //findLI.style.color = "#999";
        findLI.style.cursor = "pointer";
        findLI.style.fontSize = "12px";
        findLI.style.lineHeight = "22px";
        findLI.style.padding = "0px 4px 0px 4px";
        findLI.style.width = (this.layerWidth - 2) + "px";
        findLI.onclick = function(){           
            This.cursor = this.cursor;
            This.AddToInput(this);
             This.DivSetVisible(false);
        };
        findLI.onmouseover = function(){
            this.style.background ="#3366CC";
            This.cursor = this.cursor;
        };
        findLI.onmouseout = function(){
            this.style.background = "#ffffff";
        
        };
          var txtNode = document.createTextNode(varValueArray[i]);
          findLI.appendChild(txtNode);
        /*.replace(
            new RegExp(this.keyword,"gi"),
            "<span style='color: #369;'>" + this.keyword + "</span>"
            );*/
        findList.appendChild(findLI);
    }
    if ( this.result>0) {
        findList.style.height = (this.result > 10 ? 220 : 22 * this.result) + "px"; 
        document.getElementById("findContent").style.display = "block";
        This.DivSetVisible(true);
    } else {
        this.HiddenFrame();
    }
}
 
Suggest.prototype.DivSetVisible =function(state){
        var DivRef = document.getElementById('findContent');
        var IfrRef = document.getElementById('DivShim');
        if(state)
        {
            DivRef.style.display = "block";
            IfrRef.style.width = DivRef.offsetWidth;
            IfrRef.style.height = DivRef.offsetHeight;
            IfrRef.style.top = DivRef.style.top;
            IfrRef.style.left = DivRef.style.left;
            IfrRef.style.zIndex = DivRef.style.zIndex - 1;
            IfrRef.style.display = "block";
        }else{                        
            DivRef.style.display = "none";
            IfrRef.style.width = 0;
            IfrRef.style.height = 0;
            IfrRef.style.top = 0;
            IfrRef.style.left = 0;
            IfrRef.style.display = "none";
        }
    }

 

Suggest.prototype.CreateElement = function(objParent){
    if(!objParent){alert("object not found!");return (false);}

    var This = this;
    if(this.objParent && this.objParent != objParent){this.Hidden();}
    this.objParent = objParent;
    this.objParent.onkeyup = function(event){
        This.ReSearch(event);             
    };
    this.objParent.onkeydown = function(event){
        This.MoveCursor(event);
    };
       //this.objParent.onblur = function(){This.taskID = setTimeout(function(){This.Hidden();}, 1000);};
 
     this.layerWidth = this.objParent.offsetWidth;
   
    if(!document.getElementById("findContent")){
         var findContent = document.createElement("div");
        findContent.id = "findContent";
        //findContent.style.width = (this.layerWidth - 2) + "px";
        findContent.style.zIndex = "100";
        findContent.style.position = "absolute";
        findContent.style.background = "#fff";
        findContent.style.border = "1px solid #999";
        findContent.style.display = "none";
       
        var findList = document.createElement("ul");
        findList.id = "findList";
        //findList.style.width = (this.layerWidth - 2) + "px";
        findList.style.listStyle = "none";
        findList.style.margin = "0px 0px 0px 0px";
        findList.style.padding = "0px 0px 0px 0px";
        findList.style.height = "220px";
        findList.style.overflowX = "hidden";
        findList.style.overflowY = "auto";
       
        var divAD = document.createElement("div");
        divAD.style.height = "22px";
        divAD.style.lineHeight = "22px";
        divAD.style.textAlign = "right";
        divAD.style.paddingRight = "5px";
        divAD.style.background = " #E1E1E1";
        divAD.innerHTML = "<a href=/"javascript:void(0);/" style=/"text-decoration: underline; color: #369;/" οnclick=/"Suggest.Hidden();/">close</a>";
       
        findContent.appendChild(findList);
        findContent.appendChild(divAD);
        document.body.appendChild(findContent);
        this.Position(findContent);
    }
    else{
        this.Position(document.getElementById("findContent"));
    }
}

Suggest.prototype.Position = function(findContent){
    document.getElementById("findList").style.width = (this.layerWidth - 2) + "px";
    document.getElementById("findContent").style.width = (this.layerWidth - 2) + "px";

    var selectedPosX = 2;
    var selectedPosY = -1;
   
    theElement = this.objParent;
   
    while(theElement != null){
        selectedPosX += theElement.offsetLeft;
        selectedPosY += theElement.offsetTop;
        theElement = theElement.offsetParent;
    }

    findContent.style.left = selectedPosX + "px";
    findContent.style.top = selectedPosY + this.objParent.offsetHeight + "px";
}

Suggest.prototype.AddToInput = function(el){       
    this.objParent.value = el.firstChild.nodeValue;
    //this.objParent.value = el.innerHTML;//.replace(/<[^>]+>/gi,"");
    this.Hidden();
    //this.objParent.form.submit();
}

Suggest.prototype.MoveCursor = function(event){
    var e = event || window.event;
    switch(e.keyCode){
        case 38://up key
            if(this.result > 0){this.MoveToCurrent(-1);}
            break;
        case 40://down key
            if(this.result > 0){this.MoveToCurrent(1);}
            break;
        case 13://return key
            if(this.result > 0){
                    if(this.cursor < 0){
                        this.Hidden();
                    }else{
                        this.AddToInput(this.SelectedValue());
                    }
                     this.DivSetVisible(false);
                    return (false);
            }
            break;
        case 27://esc key
            this.Hidden();
            break;
        case 9://tab
               this.HiddenFrame();
            break;
        default:
            return (false);
            break;
    }
}

Suggest.prototype.ReSearch = function(event){
    var e = event || window.event;
    if(e.keyCode == 38 || e.keyCode == 40){return (false);}
   
    this.objParent = e.target || e.srcElement;
    this.cursor = -1;
   // if(this.objParent.value.replace(/(^/s*)|(/s*$)/g, "") != ""){
       if(this.objParent.value!=""){
        this.Search(this.objParent);
    }else{
        this.Hidden();
    }
}


Suggest.prototype.MoveToCurrent = function(step){
    var el1 = document.getElementById("li" + this.cursor);
    if(el1){
        el1.style.background = "#ffffff";
    }
   
    this.cursor += step;
    if(this.cursor < 0){this.cursor = 0;}
    if(this.cursor >= this.result){this.cursor = this.result - 1;}
   
    var el2 = document.getElementById("li" + this.cursor);
    if(el2){
       
        el2.style.background = "#3366CC";
 
    }
   
    this.startIndex += step;
    if(this.startIndex > 9){this.startIndex = 9;}
    if(this.startIndex < 0){this.startIndex = 0;}
   
    //document.getElementById("startIndex").innerHTML = this.startIndex;
   
    if(this.cursor > 9){
        if(this.startIndex == 0){
            document.getElementById("findList").scrollTop = (this.cursor) * 22;
        }
        if(this.startIndex == 9){
            document.getElementById("findList").scrollTop = (this.cursor - 9) * 22;
        }
    }else{
        document.getElementById("findList").scrollTop = 0;
    }
}

Suggest.prototype.SelectedValue = function(){
    return document.getElementById("findList").getElementsByTagName("li")[this.cursor];
}

Suggest.prototype.Hidden = function(){
    this.cursor = -1;
    if(document.getElementById("findContent")){
        document.getElementById("findContent").style.display = "none";
        //document.body.removeChild(findContent)
         var IfrRef = document.getElementById('DivShim');
          IfrRef.style.width = 0;
        IfrRef.style.height = 0;
        IfrRef.style.top = 0;
        IfrRef.style.left = 0;
        IfrRef.style.display = "none";
    }   
}
Suggest.prototype.HiddenFrame = function(){
    var DivRef = document.getElementById('findContent');
    var IfrRef = document.getElementById('DivShim');
      IfrRef.style.width = 0;
    IfrRef.style.height = 0;
    IfrRef.style.top = 0;
    IfrRef.style.left = 0;
    IfrRef.style.display = "none";
    DivRef.style.display = "none";
    if(document.getElementById("findContent")){
           document.getElementById("findContent").style.display = "none";
    }
}

 

html调用

<script>

var Suggest = new Suggest();

</script>

<input type="text" name="" id="" class="select" onFocus="Suggest.Search(this);" >
<iframe id="DivShim" src="#" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"></iframe>