//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>
<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>
层,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.环境下测试成功。
//我不会封装成服务器控件,各位高手可以考虑封装。
//该代码完全自由开放。使用后果作者不负责。转载请注明出处和原作者。
另外,做系统的时候,如果能找到源代码就好。这样就不容易侵权。