可输入模糊查询功能的下拉菜单 感觉ext里面那个就挺漂亮的,用起来也挺不错 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx参考下吧 谢谢楼上的两位to-varlj:能否贴个例子出来呀?谢谢了to-sy_binbin:能否麻烦你把第2段详细解释下?谢谢了 用Ajax可以实现,我现在正在做呢,过两天我给你源代码啊 哪个第2段??查询数据库那段??就是模糊搜索,生成XML格式的数据! 对,就是第2段的哦AJAX我不会呀 不会就学啊AJAX最主要的东西不在你说的第2段里在第一段里的那些JS代码里呢 不需要用AJAX也可以实现,前2天我刚做过此效果,呵不过我是先将所有数据读取出来,然后再根据输入去筛选的完整代码如下,直接保存为HTML运行即可出效果了:<HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY > <Script Language="Javascript">var j = 0;function SelectValue(obj){ var input = obj.parentNode.nextSibling; document.all.box2.value = obj.options[obj.selectedIndex].text; document.getElementById("txtSection").value=obj.options[obj.selectedIndex].value; alert(document.getElementById("txtSection").value);}function InputValue(obj){ var n = 1; var tmpObj; var src = document.all.SelectOption; var msg = document.all.msg; 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; if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){ selText.setAttribute("id","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.all.box2.value = this.innerHTML; msg.style.display="none"; document.getElementById("txtSection").value=this.value; } msg.appendChild(selText); n++; } } } else { document.all.msg.style.display="none"; } } else { //press down key if(event.keyCode==40){ j++; for (var i=0; i<src.length; i++) { tmpObj = document.getElementById("selText"+i); if(tmpObj != null){ tmpObj.style.backgroundColor='#ffffff'; tmpObj.style.color ='#000000'; } } tmpObj = document.getElementById("selText"+j); if(tmpObj != null){ tmpObj.style.backgroundColor='#003399'; tmpObj.style.color ='#ffffff'; }else{ j = 0; } } //press up key if (event.keyCode==38){ j--; for (var i=0; i<src.length; i++) { tmpObj = document.getElementById("selText"+i); if(tmpObj != null){ tmpObj.style.backgroundColor='#ffffff'; tmpObj.style.color ='#000000'; } } tmpObj = document.getElementById("selText"+j); if(tmpObj != null){ tmpObj.style.backgroundColor='#003399'; tmpObj.style.color ='#ffffff'; }else{ j = 2; } } //press enter key if (event.keyCode==13){ tmpObj = document.getElementById("selText"+j); document.all.box2.value = tmpObj.innerHTML; msg.style.display="none"; document.getElementById("txtSection").value=tmpObj.value; } }}function SelMatch(src){ var currSel = document.all.box2.value; for (var i=0;i<src.length;i++){ if (src(i).text==currSel) { src.options(i).selected = true; } }}function NoMsg(){ if(document.activeElement.id=="msg") return false; else document.all.msg.style.display='none';} </Script> <TABLE border=0 cellPadding=1 cellSpacing=0 width="100%"> <TR> <TD width="24%"><font face="Arial" size="2">Section</font></TD> <TD COLSPAN=3 width="76%"> <div style="position:relative;"> <span style="margin-left:230px;width:18px;overflow:hidden;"> <select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-232px;" onchange="SelectValue(this)" onclick="SelMatch(this)" id="SelectOption" name="SelectOption" > <OPTION value='ALL' Selected>ALL</OPTION><OPTION value='0TEST1'>0TEST1 = Testing 1<OPTION value='0TEST1'>0TEST2 = Testing 1<OPTION value='0TEST1'>0TEST3 = Testing 1<OPTION value='SECTION'>SECTION = Section Description XXXXX AAA</OPTION> </select></span><input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="0" > <div id="msg" style="border:1px solid green; font-size :14PX;white-space:nowrap;overflow:hidden;width:230px;position:absolute;left:0px;top:20px;display:none"></div></div> <Input Type="Hidden" Name="txtSection" id="txtSection"> </TD> </TR> </TABLE><p></BODY></HTML> 哎!用winsongoog的加进去后和这个页面 里的选项卡不兼容呀 setTimeout小问题 如何用javascript控制窗口大小? js动态替换img的src导致内存不断增长 100分求助日历控件的问题 大哥大姐们快来帮帮我,页面传值问题,偶有点菜呀~ 关于dom 如何判断用户输入的数据类型?!(在线等!急。。。。。。。。。。!) showmodelessdialog 的frame 问题 Opera和netscape它们是如何支持XML,应该如何写HTML文件操作XML. listbox值得左右移动 能不能举几个js中不能被for in 的例子 如何实现js背景轮换效果
参考下吧
to-varlj:能否贴个例子出来呀?谢谢了
to-sy_binbin:能否麻烦你把第2段详细解释下?谢谢了
哪个第2段??查询数据库那段??就是模糊搜索,生成XML格式的数据!
AJAX我不会呀
不过我是先将所有数据读取出来,然后再根据输入去筛选的完整代码如下,直接保存为HTML运行即可出效果了:
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>可输入的下拉框</TITLE> </HEAD>
<BODY >
<Script Language="Javascript">
var j = 0;
function SelectValue(obj)
{
var input = obj.parentNode.nextSibling;
document.all.box2.value = obj.options[obj.selectedIndex].text;
document.getElementById("txtSection").value=obj.options[obj.selectedIndex].value;
alert(document.getElementById("txtSection").value);
}function InputValue(obj)
{
var n = 1;
var tmpObj;
var src = document.all.SelectOption;
var msg = document.all.msg;
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; if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){
selText.setAttribute("id","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.all.box2.value = this.innerHTML;
msg.style.display="none";
document.getElementById("txtSection").value=this.value;
}
msg.appendChild(selText);
n++;
}
}
}
else {
document.all.msg.style.display="none";
}
}
else {
//press down key
if(event.keyCode==40){
j++;
for (var i=0; i<src.length; i++)
{
tmpObj = document.getElementById("selText"+i);
if(tmpObj != null){
tmpObj.style.backgroundColor='#ffffff';
tmpObj.style.color ='#000000';
}
}
tmpObj = document.getElementById("selText"+j);
if(tmpObj != null){
tmpObj.style.backgroundColor='#003399';
tmpObj.style.color ='#ffffff';
}else{
j = 0;
}
}
//press up key
if (event.keyCode==38){
j--;
for (var i=0; i<src.length; i++)
{
tmpObj = document.getElementById("selText"+i);
if(tmpObj != null){
tmpObj.style.backgroundColor='#ffffff';
tmpObj.style.color ='#000000';
}
}
tmpObj = document.getElementById("selText"+j);
if(tmpObj != null){
tmpObj.style.backgroundColor='#003399';
tmpObj.style.color ='#ffffff';
}else{
j = 2;
}
}
//press enter key
if (event.keyCode==13){
tmpObj = document.getElementById("selText"+j);
document.all.box2.value = tmpObj.innerHTML;
msg.style.display="none";
document.getElementById("txtSection").value=tmpObj.value;
}
}
}function SelMatch(src)
{
var currSel = document.all.box2.value;
for (var i=0;i<src.length;i++){
if (src(i).text==currSel)
{
src.options(i).selected = true;
}
}
}function NoMsg()
{
if(document.activeElement.id=="msg")
return false;
else
document.all.msg.style.display='none';
}
</Script>
<TABLE border=0 cellPadding=1 cellSpacing=0 width="100%">
<TR>
<TD width="24%"><font face="Arial" size="2">Section</font></TD>
<TD COLSPAN=3 width="76%"> <div style="position:relative;">
<span style="margin-left:230px;width:18px;overflow:hidden;"> <select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-232px;" onchange="SelectValue(this)" onclick="SelMatch(this)" id="SelectOption" name="SelectOption" >
<OPTION value='ALL' Selected>ALL</OPTION>
<OPTION value='0TEST1'>0TEST1 = Testing 1
<OPTION value='0TEST1'>0TEST2 = Testing 1
<OPTION value='0TEST1'>0TEST3 = Testing 1
<OPTION value='SECTION'>SECTION = Section Description XXXXX AAA
</OPTION>
</select></span>
<input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="0" >
<div id="msg" style="border:1px solid green; font-size :14PX;white-space:nowrap;overflow:hidden;
width:230px;position:absolute;left:0px;top:20px;display:none"></div>
</div> <Input Type="Hidden" Name="txtSection" id="txtSection">
</TD>
</TR>
</TABLE>
<p></BODY></HTML>