可输入模糊查询功能的下拉菜单

注册时间: 17/02/2009 09:38:31 文章: 761 离线

要实现的效果如图所示：

实现源码：
SearchSelect.js文件内容如下：
变量说明：obj为当天的可编辑文本框对象，editable为可编辑的文本框id值，SelectOption为选择框的id值。
注：源代码在运行时需要将中文注释全部去掉，否则容易出现执行时因为乱码造成的问题，很隐蔽。

function struct(key, value){

this.key = key;
  this.value = value;
}

//get singleton object for each eidtable text field
function getEachSingleEditor(editable){
    var editor;
    if (MapClass.lookUp(editable) == null) {
	    editor = new EditableSelect();
	    MapClass.setAt(editable, editor);
    }else{
        editor = MapClass.lookUp(editable);
    }
    return editor;
}

//call mathod InputValue() of each Text field's EditableSelect singleton object
function InputValue(obj,editable,SelectOption) {
    var editor = getEachSingleEditor();
    editor.InputValue(obj,editable,SelectOption);
}

//call mathod NoMsg() of each Text field's EditableSelect singleton object
function NoMsg(editable) {
    var editor = getEachSingleEditor();
    editor.NoMsg(editable);
}

//construct EditableSelect object for specific Text field.
function EditableSelect(){
    //此变量用来记录上移下移位置
    this.j = 0;
    
    //两变量用来解决IE里的bug: 层DIV被下拉框SELECT遮盖的,原因在于SELECT的优先级别比div高.
    
    //msg div被SELECT遮盖,再建立新的层div以覆盖SELECT
    this.msgLayer = document.createElement("DIV"); 
    //放在msgLayer中的iframe,可覆盖SELECT    
    this.msgLayerF = document.createElement("IFRAME");    
     //让建立新的层div以覆盖SELECT,和msg的div一样将采用absolute坐标,因此将与msg的div二合一层叠    
    this.msgLayer.appendChild(this.msgLayerF);  
}

EditableSelect.prototype.SelectValue= function(obj, editable)
{	
    var input = obj.parentNode.nextSibling;
    document.getElementById(editable).value = obj.options[obj.selectedIndex].text;
    document.getElementById(editable+ "_hiddentxt").value=obj.options[obj.selectedIndex].value;
    alert(document.getElementById(editable+ "_hiddentxt").value);
}

EditableSelect.prototype.InputValue=function(obj,editable,SelectOption) 
{
    if(document.getElementById(editable).value == "\u5168\u90e8")   //"全部"
        document.getElementById(editable).value = "";	 
        
    var n = 1;    
    var tmpObj;
    var src = document.getElementById(SelectOption);
    var msg = document.getElementById(editable + "_msg"); 
    var owner = this;    
     
    if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){
        if(obj.value!=""){
             msg.style.display="";
             msg.innerHTML="";
             if(msg.hasChildNodes()) 
             { 
                msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]); 
             }
             
             for (var i=0;i<src.length;i++){
               var selValue = document.createElement("div");
               var selText = document.createElement("div");
               selText.value = src(i).value;
               selText.innerHTML = src(i).text;          
               selText.style.backgroundColor='#ffffff';    
                            
               if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){ 
                    selText.setAttribute("id",SelectOption + "selText"+n);
                    selText.onmouseover=function (){   
                    this.style.backgroundColor='#003399';   
                    this.style.color ='#ffffff'; 
                   }
                   selText.onmouseout=function (){   
                    this.style.backgroundColor='#ffffff'; 
                    this.style.color ='#000000';
                   }
                   selText.onclick=function (){                      
                    document.getElementById(editable).value = this.innerHTML;
                    msg.style.display="none";
    		        owner.msgLayer.style.display="none";                     
                    document.getElementById(editable+ "_hiddentxt").value=this.value;
				    if(document.getElementById(editable).value == "\u5168\u90e8")   //"全部"
				        document.getElementById(editable).value = "";                    
                   }
                    msg.appendChild(selText);
                    n++;
               }
             }
             
            //纠正ie的bug    .b ****
            //在IE里，层DIV被下拉框SELECT遮盖,这是IE的bug之一,原因在于select的优先级别比div高.因此无论如何用css属性z-index设置都没用.
            //常用的优先级比select高的HTML控件有object和iframe,在此选用iframe
            //让msg的z-index比msgLayer的大才能将msg显示在msgLayer之上
            msg.style.zIndex=3;

this.msgLayer.style.display=""; 
		    this.msgLayer.style.position="absolute";   
		    this.msgLayer.style.left="0";
		    this.msgLayer.style.top=src.style.height;
		    this.msgLayer.width = msg.style.width; 
		    this.msgLayer.height = msg.style.height; 
			this.msgLayer.style.border="black 1px solid"; 
			this.msgLayer.style.backgroundColor="white"; 		     
            this.msgLayer.id = "IframeInDiv";
            this.msgLayerF.scrolling = "no";   			  
            this.msgLayerF.frameborder = 0;		 
			this.msgLayerF.width=msg.offsetWidth; 
			this.msgLayerF.height=msg.offsetHeight;
			
            //msgLayer和msg的div一样将采用absolute坐标,因此将与msg的div二合一层叠
		    msg.parentNode.appendChild(this.msgLayer);

//纠正ie的bug   .e  ***		    
        }
        else {
            document.getElementById(editable + "_msg").style.display="none";
            this.msgLayer.style.display="none";
        }
    }
    else {
        //press down key
        if(event.keyCode==40){
            this.j++;
            for (var i=0; i<src.length; i++)
            {
                tmpObj = document.getElementById(SelectOption + "selText"+i);

if(tmpObj != null){
                    tmpObj.style.backgroundColor='#ffffff'; 
                    tmpObj.style.color ='#000000';
                }                
            }
            tmpObj = document.getElementById(SelectOption + "selText"+this.j);
            if(tmpObj != null){
                tmpObj.style.backgroundColor='#003399';   
                tmpObj.style.color ='#ffffff'; 
            }else{
                this.j = 0;
            }            
        }
        //press up key
        if (event.keyCode==38){
            //chenping 如果不加此行，在往上移动移到第一个再往上还可移,然后按Enter选择时将出错说msg为空      
            if (this.j < 2) this.j = 2;  
            this.j-- ;
            
            for (var i=0; i<src.length; i++)
            {
                tmpObj = document.getElementById(SelectOption + "selText"+i);
                if(tmpObj != null){
                    tmpObj.style.backgroundColor='#ffffff'; 
                    tmpObj.style.color ='#000000';
                }                
            }
            tmpObj = document.getElementById(SelectOption + "selText"+this.j);
            if(tmpObj != null){
                tmpObj.style.backgroundColor='#003399';   
                tmpObj.style.color ='#ffffff'; 
            }else{
                this.j = 2;
            }        
        }
        //press enter key
        if (event.keyCode==13){
            if ( this.j > 0) {
	            tmpObj = document.getElementById(SelectOption + "selText"+this.j);
	            
	            if(tmpObj == null||tmpObj == undefined) return;
	            
	            document.getElementById(editable).value = tmpObj.innerHTML;
			    if(document.getElementById(editable).value == "\u5168\u90e8")   //"全部"
			        document.getElementById(editable).value = "";	            
	            msg.style.display="none";	     
    		    this.msgLayer.style.display="none"; 
	            document.getElementById(editable+ "_hiddentxt").value=tmpObj.value;
                this.j = 0;	            
            }
        }
    }
}

EditableSelect.prototype.SelMatch = function(src,editable)
{
    var currSel = document.getElementById(editable).value;
    for (var i=0;i<src.length;i++){
        if (src(i).text==currSel)
        {
            src.options(i).selected = true;
        }        
    }
}

EditableSelect.prototype.NoMsg = function(editable)
{    
    if(document.activeElement.id == editable + "_msg") 
        return false; 
    else {
        document.getElementById(editable + "_msg").style.display='none';
        //如果鼠标移动到msgLayer的div之外,让其不显示
        this.msgLayer.style.display="none";  
    }
}

ProducysSearch.jsp调用部分代码

下图是代码的测试结果，通过以下几项测试
1. 实现模糊查询。
2. 下拉的msg div能够盖住Select，而不是被Select盖住。
3. 可以看出，下拉的msgLay div比msg div的尺寸大一点点，有待以后修改，现在的效果也可接受。

参考文章：
可输入模糊查询功能的下拉菜单
JS 字符串操作技巧
UNICODE编辑与中文在线转换
学习CSS网页制作：z-index在IE中的迷惑
Visual formatting model
深入理解css中的position定位和z-index属性
解决DIV层被Select覆盖的问题
HTML Iframe dom动态生成且隐藏边框