//javascript代码
<script language="javascript" type="text/javascript">
function Custmousemove(SendObj){
  event.cancelBubble=true;
}
function CustMouseOut(SendObj,Obj2,Obj3){
   event.cancelBubble=true;
}//droplist在网页上的鼠标移动事件
 function DropOnMouseMove(evt,SendObj) {
 event.cancelBubble=true;
  evt=(evt)?evt:((window.event)?window.event:"")
    if(evt){
        var elem=(evt.target)?evt.target:evt.srcElement
        elem.className=(evt.type=="mouseover")?"highlight":"normal"
        var LayObj=document.getElementById("LayerCust");
        var TextObj=document.getElementById("TextCust");
        var ListObj=document.getElementById("ListBoxCust");
        AddList(ListObj,SendObj,TextObj,LayObj);
        LayObj.style.left=SendObj.getBoundingClientRect().left;
        LayObj.style.top=SendObj.getBoundingClientRect().top;
        LayObj.style.visibility="hidden";
        LayObj.style.visibility="visible";
        SendObj.style.visibility="hidden";
        TextObj.value=SendObj.value;
        TextObj.focus();
        if(ListObj.length==0){
          LayObj.style.width=SendObj.getBoundingClientRect().right-SendObj.getBoundingClientRect().left;
        }
        
    }
}
//droplist在网页上的鼠标移动事件
 function DropOnMouseMove(evt,SendObj) {
 event.cancelBubble=true;
  evt=(evt)?evt:((window.event)?window.event:"")
    if(evt){
        var elem=(evt.target)?evt.target:evt.srcElement
        elem.className=(evt.type=="mouseover")?"highlight":"normal"
        var LayObj=document.getElementById("LayerCust");
        var TextObj=document.getElementById("TextCust");
        var ListObj=document.getElementById("ListBoxCust");
        AddList(ListObj,SendObj,TextObj,LayObj);
        LayObj.style.left=SendObj.getBoundingClientRect().left;
        LayObj.style.top=SendObj.getBoundingClientRect().top;
        LayObj.style.visibility="hidden";
        LayObj.style.visibility="visible";
        SendObj.style.visibility="hidden";
        TextObj.value=SendObj.value;
        TextObj.focus();
        if(ListObj.length==0){
          //ListObj.style.width="100%";
          LayObj.style.width=SendObj.getBoundingClientRect().right-SendObj.getBoundingClientRect().left;
          //TextObj.style.width="100%";
          //ListObj.style.width="100%";
        }
        
    }
}//将drop添加到层的list中。
function AddList(ListObj,DropListObj,TextObj,LayObj){
event.cancelBubble=true;
var opt
var i;
    LayObj.droplistname=DropListObj.id;
    ListObj.droplistname=DropListObj.id;
    TextObj.droplistname=DropListObj.id;
    ListObj.length=0;
   for(i=0;i<DropListObj.length;i=i+1){
     opt=document.createElement("OPTION");
     ListObj.options.add(opt);
     opt.innerHTML=DropListObj.item(i).text;
     opt.value=DropListObj.item(i).value;
   }
}
function FormMouseMove(){
event.cancelBubble=true;
if(document.getElementById("TextCust")!=null){
 if(document.getElementById("LayerCust")!=null){
    var LayerObj=document.getElementById("LayerCust");
    LayerObj.style.visibility="hidden";
    var ListObj=document.getElementById("ListBoxCust")
    if(ListObj.droplistname!=""){
       var DropListObj=document.getElementById(ListObj.droplistname)
       DropListObj.style.visibility="visible";
    }
  }
 }
}
//根据textstr查找listobj中匹配项的序号。找到了,返回第一个序号,否则返回-1。
function getPos(TextStr,ListObj){
   if (TextStr==null || !TextStr){
       return -1;
   }
   for (var i=0;i<ListObj.options.length;i++ ){
      if(ListObj.options[i].text.indexOf(TextStr)>=0){
        return i;
        break;
      }
   }
   return -1;
}
//将不匹配textstr的listobj项删除。
function getPosDelete(TextStr,ListObj){
 if (TextStr==null )
 { }else{ 
   var i=0;
   while(i<ListObj.options.length)
   {
     if(ListObj.options[i].text.indexOf(TextStr)>=0) { 
       i++;
     }else{
       ListObj.remove(i);
     }
   }
 }
}
//将跟textstr匹配的,但是不存在listobj的dropobj项添加到listobj中。
function AppendList(TextStr,ListObj,DropObj){
var TempStr;
var opt
  for(var i=0;i<DropObj.length;i++){
    if(DropObj.item(i).text.indexOf(TextStr)>=0){
      if(getPos(DropObj.item(i).text,ListObj)==-1){
        opt=document.createElement("OPTION");
        ListObj.options.add(opt);
        opt.innerHTML=DropObj.item(i).text;
        opt.value=DropObj.item(i).value;
      }
    }
  }
}
//查找textstr在listobj和dropobj匹配项目,将他们无重复的显示在listobj中。
function SearchList(TextStr,ListObj,DropObj){
   getPosDelete(TextStr,ListObj);
   AppendList(TextStr,ListObj,DropObj);
   if(ListObj.length>0){
     return 0;
   }else{
     return -1;
   }
}
//TextBox的keyup事件
function IndexText(evt,SendObj){
event.cancelBubble=true;if(SendObj!=null){
 if(SendObj.id=="TextCust"){
  var ListObj=document.getElementById("ListBoxCust");
  var DropListObj=document.getElementById(ListObj.droplistname); 
  var LayObj=document.getElementById("LayerCust");
  ListObj.selectedIndex=SearchList(SendObj.value,ListObj,DropListObj);
  if(SendObj.value.length==0){
     AddList(ListObj,DropListObj,SendObj,LayObj);
   }else{
     if(evt.keyCode==13){
       if(ListObj.selectedIndex>=0){
         SendObj.value=ListObj.item(ListObj.selectedIndex).text;
       }
     }
   }
 }
 }
}
function IsEmpty(ListObj){
  for(var i=0;i<ListObj.length;i++){
    if(ListObj.item(i).text==""){
      return 1;
      break;
    }
  }
  return 0;
}
//textbox的失去焦点事件
function Textonblur(SendObj){
event.cancelBubble=true;
  if(SendObj!=null){
    if(SendObj.id=="TextCust"){
      var ListObj=document.getElementById("ListBoxCust");
      var DropListObj=document.getElementById(SendObj.droplistname);
      if(getPos(SendObj.value,ListObj)==-1){
        if(SendObj.value!=""){
          alert("您输入的数据不在列表中,请重新输入,如果数据为空,请单击列表的空项");
        }else{
          if(IsEmpty(DropListObj)==1){
            DropListObj.value="";
          }else{
            if(DropListObj.length!=0){
               alert("不能为空");
            }
          }
        }
      }else{
        //SendObj.value=ListObj.item(getPos(SendObj.value,ListObj)).value;
        DropListObj.selectedIndex=getPos(SendObj.value,DropListObj);
      }
    }
  }
}//选择列表中的list单击事件
function ListClick(ListObj,TextObj){
event.cancelBubble=true;
if(ListObj.id=="ListBoxCust"){
  if(ListObj.length>0){
    TextObj.value=ListObj.item(ListObj.selectedIndex).text
    var DropListObj=document.getElementById(ListObj.droplistname);
    DropListObj.selectedIndex=getPos(TextObj.value,ListObj);
    DropListObj.value=TextObj.value;
  }
}
}
</script>

解决方案 »

  1.   

    aspx代码:
    层,text,select组合框代码:
         <!-- 一个层,层中有个text,有个list-->
    <div id="LayerCust"  onmousemove="Custmousemove(this)"  droplistname="" style="position:absolute; width:141px; height:144px; z-index:2; left: 233px; top: 246px; vertical-align: top; text-align: left; visibility: hidden; clear: none;"> 
    <input id="TextCust" type="text"  onkeyup="IndexText(event,this);"  onblur="Textonblur(this);" style="width:100%"   droplistname="" tabindex="100" />
    <select size="4" name="ListBoxCust" id="ListBoxCust"   onclick="ListClick(this,TextCust);" droplistname="" style="height:100px;width:100%;" tabindex="101">
    </select>
    </div>
    cs代码:
    /// <summary>
            /// 这个在page load事件中调用,不管IsPostBack是否为真为假,向sourdropdownlist添加web页面的onmouseover属性,鼠标移动到dropdownlist上,就显示层。
            /// </summary>
            /// <param name="SourDropDownList"></param>
            public void SetDropListScript(DropDownList SourDropDownList)
            {
                
                SourDropDownList.Attributes.Add("onmouseover", "DropOnMouseMove(event,this)");
            }
            /// <summary>
            ///  这个在page load事件中调用,不管IsPostBack是否为真为假,向page添加onmousemove属性,这样鼠标移开层的范围,就让层隐藏。
            /// </summary>
            /// <param name="SourPage"></param>
            public void SetFormMouseMove(System.Web.UI.Page SourPage)
            {
                SourPage.Form.Attributes.Add("onmousemove", "FormMouseMove();");
                
            }
            /// <summary>
            /// 这个在page load事件中调用,不管IsPostBack是否为真为假,将用户输入的返回到dropdownlist的text属性中。
            /// </summary>
            /// <param name="SourDropDownList"></param>
            /// <param name="SourPage"></param>
            public void GetDropListScript(DropDownList SourDropDownList,System.Web.UI.Page SourPage)
            {
                if (SourPage.Request.Form[SourDropDownList.ID] != null)
                    if (SourDropDownList.Items.FindByText(SourPage.Request.Form[SourDropDownList.ID].ToString()) != null)
                        SourDropDownList.Text = SourPage.Request.Form[SourDropDownList.ID].ToString();
            }
    //功能1:鼠标移动到dropdwonlist上,就显示层。将鼠标移动到层外,就消失,不是很好的效果
    //大家可以测试
    //2:在text上按回车,检测用户输入的是否在列表中,如果不在,就提示。但是如果页面中存在
    //服务器上的button,那么请把UseSubmitBehavior设置为false,否则该button会响应回车事件
    //3:单击列表,选中项在text中显示。但是在页面比较多服务器控件的时候,这功能会消失,如
    //页面上只有dropdwonlist和层,就能显示在text中。
    //4:在asp.net2.0,c#.net2005,winxp,win2000,iis5.0以上,ie6.环境下测试成功。
    //我不会封装成服务器控件,各位高手可以考虑封装。
    //该代码完全自由开放。使用后果作者不负责。转载请注明出处和原作者。
      

  2.   

    是啊,是有。但是我当初写的时候,没有找到类似的控件,就用dropdownlist做了。做到最后,用户非的有那样的功能不可。这怎么办?改程序的话就麻烦,涉及面太广,而且改完后还要一一测试,于是我就想到了这样的方法。效果还不错。也不用全部用到dropdwonlist的地方都测试。
    另外,做系统的时候,如果能找到源代码就好。这样就不容易侵权。