--------------------------------------------------
—————————————————————————————————————
实时取得数据的下拉框（WEBSERVICE实现）
—————————————————————————————————————
![]()
GetDropDownList.asmx：
![]()
<WebMethod()> _
![]()
Public Function GetDropDownList(ByVal keyword As String) As String
![]()
Dim conn As New SqlConnection("Server=localhost;user id=sa;password=ycm119;database=Northwind;")
![]()
Dim cmd As New SqlCommand
![]()
With cmd
![]()
.Connection = conn
![]()
.CommandText = "Select CategoryName from Categories where CategoryName like @CategoryName"
![]()
.Parameters.Add(New SqlParameter("@CategoryName", SqlDbType.NVarChar))
![]()
.Parameters("@CategoryName").Value = "%" & keyword & "%"
![]()
End With
![]()
Dim dad As New SqlDataAdapter(cmd)
![]()
Dim dst As New DataSet
![]()
dad.Fill(dst, "Categories")
![]()
Return dst.GetXml
![]()
End Function
![]()
----------------------------------------------------------------------------------
![]()
注意：需要在web.config中添加（因为HTM文件调用此WEBSERVICE时是使用的HttpGet方式：
![]()
<webServices>
![]()
<protocols>
![]()
<add name="HttpGet"/>
![]()
<add name="HttpPost"/>
![]()
</protocols>
![]()
</webServices>
![]()
----------------------------------------------------------------------------------
![]()
HTM：文件
![]()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
![]()
<html>
![]()
<head>
![]()
<title>MyDropDownList</title>
![]()
<script language="javascript">
![]()
var index;
![]()
var alreadyInDiv;
![]()
function Init()
![]()
{
![]()
divparent.style.visibility="hidden";
![]()
divparent.style.left=keyword.offsetLeft;
![]()
divparent.style.width=keyword.offsetWidth;
![]()
divparent.style.top=keyword.offsetTop+24;
![]()
index=-1;
![]()
alreadyInDiv=false;
![]()
}
![]()
function getDropDownList()
![]()
{
![]()
switch(window.event.keyCode)
![]()
{
![]()
case 32:
![]()
case 13:
![]()
divparent.style.visibility="hidden";
![]()
index=-1;
![]()
break;
![]()
case 39:
![]()
case 40:
![]()
if(index<divparent.childNodes.length-1)
![]()
{
![]()
index++;
![]()
}
![]()
for(var i=0;i<divparent.childNodes.length;i++)
![]()
{
![]()
if(index==i)
![]()
{
![]()
divparent.childNodes[i].style.backgroundColor="lightblue";
![]()
keyword.value=divparent.childNodes[i].innerText;
![]()
}
![]()
else
![]()
{
![]()
divparent.childNodes[i].style.backgroundColor="white";
![]()
}
![]()
}
![]()
break;
![]()
case 37:
![]()
case 38:
![]()
if(index>0)
![]()
{
![]()
index--;
![]()
}
![]()
for(var i=0;i<divparent.childNodes.length;i++)
![]()
{
![]()
if(index==i)
![]()
{
![]()
divparent.childNodes[i].style.backgroundColor="lightblue";
![]()
keyword.value=divparent.childNodes[i].innerText;
![]()
}
![]()
else
![]()
{
![]()
divparent.childNodes[i].style.backgroundColor="white";
![]()
}
![]()
}
![]()
break;
![]()
default:
![]()
var xmldom=new ActiveXObject("Microsoft.XMLDOM");
![]()
xmldom.async=false;
![]()
xmldom.load("http://localhost/moretest/GetDropDownList.asmx/GetDropDownList?keyword="+keyword.value);
![]()
//alert(xmldom.xml);
![]()
xmldom.loadXML(xmldom.xml.replace(/</g,"<").replace(/>/g,">"));
![]()
//alert(xmldom.xml);
![]()
var strhtml="";
![]()
var nodelist=xmldom.documentElement.getElementsByTagName("CategoryName")
![]()
for(var i=0;i<nodelist.length;i++)
![]()
{
![]()
strhtml +="<div style=\"width:100%\" onmouseover=\"subdivmouseover(this)\" onmouseout=\"subdivmouseout(this)\" idx="+i+" ondblclick=\"keyword.value=this.innerText;divparent.style.visibility='hidden';index=-1;\" unselectable='on'>"+nodelist[i].text+"</div>";
![]()
}
![]()
divparent.innerHTML=strhtml;
![]()
divparent.style.visibility="visible";
![]()
}
![]()
}
![]()
function subdivmouseover(obj)//鼠标在层上每条选项之间移动时
![]()
{
![]()
for(var i=0;i<divparent.childNodes.length;i++)
![]()
{
![]()
divparent.childNodes[i].style.backgroundColor='white';
![]()
}
![]()
obj.style.backgroundColor='lightblue';
![]()
index=obj.idx;
![]()
}
![]()
function subdivmouseout(obj)
![]()
{
![]()
obj.style.backgroundColor='white';
![]()
}
![]()
</script>
![]()
</head>
![]()
<body MS_POSITIONING="FlowLayout" onload="Init()">
![]()
<input type=text id=keyword onkeyup="getDropDownList()" onclick="getDropDownList()" onblur="divparent.style.visibility='hidden'">
![]()
<div id=divparent style="border:1px solid black"></div>
![]()
</body>
![]()
</html>
![]()
—————————————————————————————————————
实时取得数据的下拉框（WEBSERVICE实现）
—————————————————————————————————————
GetDropDownList.asmx： <WebMethod()> _ Public Function GetDropDownList(ByVal keyword As String) As String Dim conn As New SqlConnection("Server=localhost;user id=sa;password=ycm119;database=Northwind;") Dim cmd As New SqlCommand With cmd .Connection = conn .CommandText = "Select CategoryName from Categories where CategoryName like @CategoryName" .Parameters.Add(New SqlParameter("@CategoryName", SqlDbType.NVarChar)) .Parameters("@CategoryName").Value = "%" & keyword & "%" End With Dim dad As New SqlDataAdapter(cmd) Dim dst As New DataSet dad.Fill(dst, "Categories") Return dst.GetXml End Function----------------------------------------------------------------------------------注意：需要在web.config中添加（因为HTM文件调用此WEBSERVICE时是使用的HttpGet方式： <webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols> </webServices>----------------------------------------------------------------------------------HTM：文件<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>MyDropDownList</title><script language="javascript">var index;var alreadyInDiv;function Init()
{
divparent.style.visibility="hidden"; divparent.style.left=keyword.offsetLeft; divparent.style.width=keyword.offsetWidth; divparent.style.top=keyword.offsetTop+24; index=-1; alreadyInDiv=false;
}function getDropDownList(){ switch(window.event.keyCode)
{
case 32: case 13: divparent.style.visibility="hidden"; index=-1; break; case 39: case 40: if(index<divparent.childNodes.length-1) { index++;
} for(var i=0;i<divparent.childNodes.length;i++) { if(index==i) { divparent.childNodes[i].style.backgroundColor="lightblue"; keyword.value=divparent.childNodes[i].innerText; } else { divparent.childNodes[i].style.backgroundColor="white"; } } break; case 37: case 38: if(index>0) { index--; } for(var i=0;i<divparent.childNodes.length;i++) { if(index==i) { divparent.childNodes[i].style.backgroundColor="lightblue"; keyword.value=divparent.childNodes[i].innerText; } else { divparent.childNodes[i].style.backgroundColor="white"; } } break; default: var xmldom=new ActiveXObject("Microsoft.XMLDOM"); xmldom.async=false; xmldom.load("http://localhost/moretest/GetDropDownList.asmx/GetDropDownList?keyword="+keyword.value); //alert(xmldom.xml); xmldom.loadXML(xmldom.xml.replace(/</g,"<").replace(/>/g,">")); //alert(xmldom.xml); var strhtml=""; var nodelist=xmldom.documentElement.getElementsByTagName("CategoryName") for(var i=0;i<nodelist.length;i++) { strhtml +="<div style=\"width:100%\" onmouseover=\"subdivmouseover(this)\" onmouseout=\"subdivmouseout(this)\" idx="+i+" ondblclick=\"keyword.value=this.innerText;divparent.style.visibility='hidden';index=-1;\" unselectable='on'>"+nodelist[i].text+"</div>"; } divparent.innerHTML=strhtml; divparent.style.visibility="visible"; }}function subdivmouseover(obj)//鼠标在层上每条选项之间移动时{ for(var i=0;i<divparent.childNodes.length;i++) { divparent.childNodes[i].style.backgroundColor='white'; } obj.style.backgroundColor='lightblue'; index=obj.idx;}function subdivmouseout(obj){ obj.style.backgroundColor='white';}</script></head><body MS_POSITIONING="FlowLayout" onload="Init()"><input type=text id=keyword onkeyup="getDropDownList()" onclick="getDropDownList()" onblur="divparent.style.visibility='hidden'"><div id=divparent style="border:1px solid black"></div></body></html>
浙公网安备 33010602011771号