JS三级联动的特殊要求，求牛人！
<form id="form1" runat="server" name="form1">

    物料类别：<select name=wllb id="wllb" onChange="MulSelect(1)">
                  </select>
                  <br />
<br />
物料名称：
                  <select name=wlnames id="wlnames" onChange="MulSelect(2)" onkeypress=sortMe(this)>
</select>
                  <br />
<br />
物料规格：
                  <select name=wlgg id="wlgg" onChange="MulSelect(3)">
</select>
                 
    <input type="submit" name="Submit" onclick="javascript:dbclick_return_and_close( );" value="提交">
</form>
<script>
// 四级联动
var arrSel=["wllb","wlnames","wlgg"]
arrData=[];

// 从数据库中读出四级联动的数据, 保存到 arrData 数组中(二维数组)
<%


set rs=conn.execute("select * from wl where company="&session("company")&"  and wldj>0")
do while not rs.eof
%>

arrData[arrData.length]=["<%=jswllb(trim(rs("wllb")))%>","<%=trim(rs("wlnames"))%>","<%=trim(rs("wlgg"))%>"]

<%
rs.movenext
loop
rs.close:set rs=nothing
conn.close:set conn=nothing
%>
</script>

<script>
// 下拉框选择变化时触发的函数，用于重新生成其下级下拉框
// num : 下拉框的级数, 1 表示最顶级
function MulSelect(num)
{
var i,j,arrTemp=[];
// 取得表单当前触发的下拉框的父级下拉框的值, 存放于 arrTemp 数组中(即不需要改变的值)
for(i=0;i<num;i++)
{
arrTemp[i]=eval("document.form1."+arrSel[i]).value
}
if(num<arrSel.length)
{
// 对于触发下拉框的下一级的下拉框
with(eval("document.form1."+arrSel[num]))
{
// 先清空内容
length=0
// 对所有的记录遍历
for(i=0;i<arrData.length;i++)
{
var find=false

// 如果父级下拉框的记录不是当前选中的值，则跳过
for(j=0;j<num;j++)
{
if(arrTemp[j]!=arrData[i][j])
{
break;
}
}
if(j!=num)
{
continue;
}
// 这里已经可以保证第 i 项记录的数据属于当前选项的子数据

// 检查循环过程中是否已经添加了该选项，如果已有了, 则 fine = true
for(m=0;m<options.length;m++)
{
if(options[m].text==arrData[i][num])
{
find=true
}
}
// 若当前没有选项或者尚未添加该选项项，则添加之
if(length==0||!find)
{
options[options.length]=new Option(arrData[i][num],arrData[i][num])
}
}

// 递归调用生成下一级菜单的内容
MulSelect((num+1))
}
}
}

// 调用联动函数初始化下拉框
MulSelect(0)
</script>



上面是我的三级联动代码，是有用的，因为二级菜单的内容太多了，选择起来很费时间，我想在二级菜单旁边增加一个INPUT文本框，就是在文本框里输入文字，然后二级菜单里就显示包含这些文字的选项，如果没输入就输出所有的选项

见图

------解决方案--------------------

<!DOCTYPE