[难度问题]关于按输入字符特征而动态列出相应的select选项，在海量select下拉列表的情况下缩小范围

效率没多考究，自己完美吧
http://fason.nease.net/samples/js/selectwithtip.html

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

index.htm<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 类似于ie地址栏的下拉列表：回车提交，动态提示</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD><BODY bgcolor="menu">
类似于ie地址栏的下拉列表：回车提交，动态提示
<?XML:NAMESPACE PREFIX="AXTeam" />
<?IMPORT NAMESPACE="AXTeam" IMPLEMENTATION="ComboBox.htc" />
<AXTeam:ComboBox id="ComboBox1" width='200'> <AXTeam:option>http://www.51js.com</AXTeam:option>
<AXTeam:option>http://www.51.net</AXTeam:option>
<AXTeam:option>http://csdn.net</AXTeam:option>
<AXTeam:option>ftp://asp.6to23.com</AXTeam:option>
<AXTeam:option>file://C:</AXTeam:option>
<AXTeam:option>C:\winnt</AXTeam:option></AXTeam:ComboBox>
</BODY>
</HTML>
////////////////
ComboBox.htc
/////////////////作者：宝玉
//Mail:[email protected]
//描述：宝贝即时寻呼
//日期：2003-01-16<public:component tagname="ComboBox" literalcontent="true">
<public:method name="CreateComboBox" internalname="f_PublicCreateComboBox" />
<public:method name="CreateComboBoxIpt" internalname="f_PublicCreateComboBoxIpt" />
<public:method name="CreateDropDown" internalname="f_PublicCreateDropDown" />
<public:method name="CreateDropList" internalname="f_PublicCreateDropList" />
<public:method name="CreatePopup" internalname="f_PublicCreatePopup" /><public:attach event="oncontentready" onevent="f_CreateComboBox()" />
<SCRIPT LANGUAGE="JScript">
var oPopup = null;
var ComboBox = null;
var ComboBoxIpt = null;
var DropDown = null;
var DropList = null;
var aNodes = new Array();
function f_CreateComboBox()
{
aNodes = f_CreateNodes(element.innerHTML);
DropList = f_PublicCreateDropList();
f_PublicCreateDropListData(aNodes);
ComboBox = f_PublicCreateComboBox();
ComboBoxIpt = f_PublicCreateComboBoxIpt();
DropDown = f_PublicCreateDropDown();
oPopup = f_PublicCreatePopup()
ComboBox.attachEvent("onmouseover",fnMouseover);
ComboBox.attachEvent("onmouseout",fnMouseout);
DropDown.attachEvent("onmousedown",fnMousedown);
ComboBoxIpt.attachEvent("onfocus",ComboBoxFocus);
ComboBoxIpt.attachEvent("onblur",ComboBoxBlur);
ComboBoxIpt.attachEvent("onkeyup",ComboBoxKeyup);
window.document.attachEvent("onclick", chkstat);
}
function f_PublicCreateComboBox()
{
var oTable = window.document.createElement("TABLE");
oTable.cellSpacing = 1;
oTable.cellPadding = 0;
oTable.id = "AXTeamComboBox"+uniqueID;
oTable.style.display = "inline";
oTable.border = 0;
oTable.bgColor = "#FFFFFF";
element.insertAdjacentElement("BeforeBegin",oTable);
oTable.ComboBoxFocus = false;
return oTable;
}
function f_PublicCreateComboBoxIpt()
{
var oInput = window.document.createElement("INPUT");
oInput.type = "text";
oInput.style.border = 0;
oInput.style.width = element.width;
oInput.style.height = 15;
oInput.id = "AXTeamComboBoxIpt"+uniqueID;
ComboBox.insertRow().insertCell().appendChild(oInput);
ComboBox.rows[0].bgColor = "#FFFFFF";
return oInput;
}
function f_PublicCreateDropDown()
{
var oTable = window.document.createElement("TABLE");
oTable.cellSpacing = 0;
oTable.cellPadding = 0;
oTable.id = "AXTeamDropDown"+uniqueID;
oTable.border = 0;
oTable.bgColor="#DBD8D1";
oTable.style.cssText = "display:inline;cursor:default;";
oTable.attachEvent("onselectstart", fnCancel);
var otd = oTable.insertRow().insertCell();
otd.style.cssText = "font-family: webdings;font-size:8px;text-align: center;width:13px;height:17px;";
otd.innerText = "6";
ComboBox.rows[0].insertCell().appendChild(oTable);
return oTable;
}
function f_PublicCreateDropList()
{
var oTable = window.document.createElement("TABLE");
oTable.cellSpacing = 1;
oTable.cellPadding = 0;
oTable.border = 0;
oTable.bgColor="#FFFFFF";
oTable.style.cssText = "font-size:9pt;cursor:default;border:1px solid #666666;";
oTable.attachEvent("onselectstart", fnCancel);
return oTable;
}
function f_PublicCreateDropListData(aNodes,redata)
{
if(!redata)
var re=new RegExp("^");
else
var re=new RegExp("^"+redata,"i");
var otd = null;
var No=DropList.rows.length;
        for(i=0;i<No;i++)DropList.deleteRow();
for(var i=0;i<aNodes.length;i++)
{
if(re.test(aNodes[i])==true)
{
otd = DropList.insertRow().insertCell();
otd.style.height = "12px";
otd.innerHTML = aNodes[i];
otd.attachEvent("onmouseover",DropListOver);
otd.attachEvent("onmouseout",DropListOut);
otd.attachEvent("onclick",DropListClick);
}
}}
function f_PublicCreatePopup()
{
var oSpan = element.document.createElement("span");
oSpan.style.cssText = " position:absolute;display:none;cursor:default;z-index:100;";
window.document.body.appendChild(oSpan);
return oSpan;
}
function f_CreateNodes(htmlText)
{
var oSpan = element.document.createElement("span");
oSpan.innerHTML = htmlText;
var xNodes = oSpan.childNodes;
var Nodes = new Array();
var nNumNodes = (xNodes == null) ? 0 : xNodes.length;
for (var nIndex = 0; nIndex < nNumNodes; nIndex++)
{
var node = xNodes[nIndex];
if (node != null)
Nodes = Nodes.concat(f_CreateDropListItems(node));
}
return Nodes;
}
function f_CreateDropListItems(oNode)
{
var rNodes;
var szTagName = (oNode.tagName == null) ? "" : oNode.tagName.toLowerCase();
if(szTagName == "option")
{
var szText = oNode.innerText;
rNodes = new Array(szText);
}
else
rNodes = new Array();
return rNodes;
}
function fnMouseover()
{
if(ComboBox.ComboBoxFocus) return;
overstat();
}
function fnMouseout()
{
if(ComboBox.ComboBoxFocus) return;
defaultstat();
}
function fnMousedown()
{
if(event.srcElement != ComboBoxIpt)
{
if(oPopup.style.display == '')
{
oPopup.style.display = 'none';
DropDown.style.color = "#000000";
return;
}
f_PublicCreateDropListData(aNodes)
ComboBoxIpt.select();
DropDown.style.color = "#FFFFFF";
}
oPopup.appendChild(DropList);
oPopup.style.width = (oPopup.offsetWidth < ComboBox.offsetWidth) ? ComboBox.offsetWidth : oPopup.offsetWidth;
oPopup.style.left = getx(ComboBox);
oPopup.style.top = gety(ComboBox)+19;
oPopup.style.display = '';
oPopup.children[0].width = "100%";
ComboBox.ComboBoxFocus = true;
}
function overstat()
{
ComboBox.bgColor="#0A246A";
DropDown.bgColor="#B6BDD2";
DropDown.style.color = "#000000";
}
function defaultstat()
{
ComboBox.bgColor="#FFFFF";
DropDown.bgColor="#DBD8D1";
DropDown.style.color = "#000000";
}
function DropListOver()
{
obj = event.srcElement;
obj.bgColor='highlight';obj.style.color='#FFFFFF';obj.style.cursor='default';
}
function DropListOut()
{
obj = event.srcElement;
obj.bgColor='#FFFFFF';obj.style.color='#000000';
}
function DropListClick()
{
obj = event.srcElement;
ComboBoxIpt.value = obj.innerText;
oPopup.style.display = "none";
ComboBoxIpt.select();
DropDown.style.color = '#000000';
}
function ComboBoxFocus()
{
if(ComboBox.ComboBoxFocus) return;
ComboBox.ComboBoxFocus = true;
overstat();
}
function ComboBoxBlur()
{
if(ComboBox.ComboBoxFocus) return;
defaultstat();
}
function ComboBoxKeyup()
{
f_PublicCreateDropListData(aNodes,ComboBoxIpt.value);
fnMousedown();
addOption();
}
function addOption(){
if(event.keyCode==13)
{
aNodes[aNodes.length] = ComboBoxIpt.value;
}
}function chkstat()
{
var oEl = event.srcElement;
while( null != oEl && oEl != ComboBox)
{
oEl = oEl.parentElement;
}
if(oEl == null)
{
defaultstat();
ComboBox.ComboBoxFocus = false;
oPopup.style.display = "none";
}
}function fnCancel()
{
return false;
}
function getx(e)
{
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
function gety(e)
{
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
</SCRIPT>两个文件放在同一目录下即可
宝玉的ComboBox效果不错
可惜放在表格中就不能用，哭~~~
还是好好研究阿信的代码，高人指点一下啊
用xmldom應該可以比較快實現。。
dom没用过，能提供点实例资料吗
http://jkisjk.vip.sina.com/html/EditableSelect1.htm
http://community.csdn.net/Expert/topic/3185/3185577.xml?temp=.8626215
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可输入的下拉框改进第二版</title>
<style>
.selectBox{border:1px solid #993300;height:20px;}
.editBox{border:0px;width:100px;cursor:default;width:100%;height:19px;padding-top:2px;margin:1px}
.dropdownbutton{font-size:12px;font-family:webdings;color:#CCFF66;height:20px;background-color:#993300;border:1px solid #993300;padding:0 2;margin:1px;cursor:default}
.selectContent{position:absolute;border:1px solid #993300;visibility:hidden;z-index:1000;background-color:#FFFFFF}
.selectContent tr{height:20px;cursor:default}
.selectContent td{font-size:12px;font-family:Vendana;padding:2 3}
.OnFocus{color:#FFFFFF;background-color:#993300}
</style>
<script language="javascript">var ZfSelect=[]
var CurrentTR=null
function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()
//在第ID个控件下增加option选项
function addOption(v,ID) {
var i=ID+1;
//var sv=document.all['ZfSelect_'+ID];
if(!v.Trim()){return;}
var tb=document.all['ZfSelect'+i];
//tb.insertRow();
//alert(tb.id);return;
var c=tb.insertRow(tb.rows.length).insertCell();
c.innerHTML=v.Trim();
c.onmouseover=new Function("MouseOver(this)");
//c.onmouseout=new Function("out(this)");
c.onclick=new Function("MouseClick("+ID+",this)");
//c.className="td_out";
v='';
}
//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
function addSelect(name,DefValue) {
var i=getSelCount();
var j=i+1;
//alert("i is:"+i);
var str='<table id="ZfContainer'+j+'" class="selectBox" border="0" width=100 cellspacing=0 cellpadding=0>  <tr>    <td><input name="'+name+'" value="'+DefValue+'" class="editBox" onblur="BoxBlur(this)" onclick="DropDown('+i+')" onkeyup="showTip('+i+')"></td>    <td width="1"><span class="dropdownbutton" onmouseover="ButtonOver(this)" onmouseout="ButtonOut(this)" onclick="DropDown('+i+')">6</span></td>  </tr></table>';
document.write(str);
str='<table id="ZfSelect'+j+'" class="selectContent" cellspacing=0 cellpadding=0></table>';
//str='<table id="ZfSelect'+j+'" class="selectContent" cellspacing=0 cellpadding=0>  <tr onmouseover="MouseOver(this)" onclick="MouseClick('+i+',this)" title="作者:Andy">    <td>'+name+'</td>  </tr></table>';
//alert(str);
    document.write(str);
ZfSelect[i]=["ZfContainer"+j,name,"ZfSelect"+j]
var s=GetObj(ZfSelect[i][0])
var ZfContainer=GetObj(ZfSelect[i][2])
ZfContainer.style.width=s.offsetWidth>ZfContainer.offsetWidth?s.offsetWidth:ZfContainer.offsetWidth
}function getSelCount() {
var i=1;
while (eval("document.getElementById('ZfContainer"+i+"')")!=null) i++;
return i-1;
}
function MouseOver(trObj){
if(!CurrentTR)CurrentTR=trObj
CurrentTR.className=""
trObj.className="OnFocus"
CurrentTR=trObj;
}function ButtonOver(BtnObj){
BtnObj.style.backgroundColor='#cc3300'
}
function ButtonOut(BtnObj){
BtnObj.style.backgroundColor='#993300'
}
function MouseClick(Index,trObj){
with(GetObj(ZfSelect[Index][1])){
value=trObj.innerText; //使text显示点击的值
//style.backgroundColor='#993300'
//style.color='#FFFFFF'
focus()
}
DropDown(Index)
}
function GoURL(trObj){
var url=trObj.getAttribute("url")
if(url&&url!="")window.open(url)
}
function BoxBlur(InputBox){
with(InputBox.style){backgroundColor="";color=''}
}
function DropDown(Index){
event.cancelBubble=true
ZfContainerReset(Index)
var show=GetObj(ZfSelect[Index][2]).style.visibility=='visible'
GetObj(ZfSelect[Index][2]).style.visibility=show?'hidden':'visible'
setPosition(Index)
}
function document::onclick(){
for(i=0;i<ZfSelect.length;i++){
GetObj(ZfSelect[i][2]).style.visibility='hidden'
with(GetObj(ZfSelect[i][2]))for(j=0;j<rows.length;j++)rows[j].style.display=""
}
}
function window::onresize(){
for(i=0;i<ZfSelect.length;i++)setPosition(i)
}function showTip(Index){
var inputbox=GetObj(ZfSelect[Index][1])
var ZfContainer=GetObj(ZfSelect[Index][2])
var num=0;
ZfContainer.style.visibility="visible"
for(i=0;i<ZfContainer.rows.length;i++){
temp=ZfContainer.rows[i].cells[0].innerText.toLowerCase();
temp1=inputbox.value.toLowerCase();
//if(ZfContainer.rows[i].cells[0].innerText.indexOf(inputbox.value)!=0)ZfContainer.rows[i].style.display="none"
if (temp.indexOf(temp1)==-1) ZfContainer.rows[i].style.display="none"
else {ZfContainer.rows[i].style.display="";num++}
}
if(num==0)ZfContainer.style.visibility='hidden'
}
function ZfContainerReset(Index){
var ZfContainer=GetObj(ZfSelect[Index][2])
for(i=0;i<ZfContainer.rows.length;i++)ZfContainer.rows[i].style.display=""
if(CurrentTR)CurrentTR.className=""
}
function setPosition(Index){
var s=GetObj(ZfSelect[Index][0])
var ZfContainer=GetObj(ZfSelect[Index][2])
var l=s.offsetLeft;
var t=s.offsetTop;
while(s=s.offsetParent){l+=s.offsetLeft;t+=s.offsetTop}
with(ZfContainer.style){left=l+1;top=t+GetObj(ZfSelect[Index][0]).offsetHeight}
}
function GetObj(id){return document.getElementById(id)}
</script>
</head>
<body>
<p>函数说明:可输入的下拉框列表改进第二版.<br>
  出自阿信的"可输入下拉框第二版",改进的地方有：<br>
  1，允许用户为控件命名,<br>
  2，增加addSelect和addOption接口，
  方便大家在项目中调用.<br>
  3，忽略大小写<br>
  4,首字匹配改为任意位置匹配比如"f"原先只能匹配"ff",改进后可以匹配"zf"</p>
<p>接口说明:<br>
  1: addSelect(obj_id,DefaultValue) 增加空的select控件<br>
  参数说明: <br>
  obj_id: 控件的id号.<br>
  DefaultValue: 缺省值.<br>
  2: addOption(value,ID) 增加option列表<br>
  参数说明:<br>
  value: 下拉列表中每一项的值<br>
  ID: 如果存在多个控件,第一个控件的ID值为0,第二个为1,一此类推.<br>
</p>
<p>使用说明:将源代码中<style>与</style>之间的代码和<script>与</script>之间的代码拷贝到你需要调用该控件的页面的相应位置.然后在需要显示控件的地方调用上面两个接口.
  <script language="javascript">
addSelect("name1","缺省值1");
addOption("ff",0);
addOption("zf",0);
addOption("clj",0);
addOption("zb",0);
addSelect("sex","选择性别");
addOption("女",1);
addOption("男",1);
  </script>

</p>
</body>
</html>
楼上的代码，还有些地方可以改进哈＾＿＾。如果当前对象不在最左边（比如说在同一tr的第二个td里），下拉框的宽度计算得不大合适
。先点击第二个框，再点击第一个框，出现的情况不大对头
。如果选项比较多，没有将选项放在个scroll框里
这个也可以试试<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<body>
<INPUT TYPE="text" NAME="ipt1" onpropertychange="show()" onclick='show()'>