一个text自动筛选select中option的实例

需求描述：

一个文本框和一个下拉选框，分别显示所选客户的ID及Name。要求

1.在文本框中可输入数字、英文字符、汉字，以用筛选下拉选框中的信息。

2.输入的筛选信息可匹配ID及Name。

3.开头匹配即可。

 

<%
 if data(0,0) <> "no Data" then
  if Request("ddlCustID") = "" then
   Response.Write "<input class=inputtext type='text' name='inputid' onBlur='idChange()' onChange='idChange()' onKeyUp='idChange()' value=''>"
  Else
   response.write "<input class=inputtext type='text' name='inputid' onBlur='idChange()' onChange='idChange()' onKeyUp='idChange()' value='"& request("ddlCustID") &"'>"
  End if
  
  response.write "<select class=inputselect name='custid' size='1'  onclick='sellerChange()'>"
    counter=0
  response.write "<option value='' >  </option>"
  
  for x = 0 to UBound(data,1)-1
   counter=counter+1
   if Request("check") <> 1 then
    if data(x,0) <> request("ddlCustID") then
     response.write "<option value = "& data(x,0) & " visible=true>" & data(x,1) & "</option>"
    Else
     response.write "<option value = "& data(x,0) & " visible=true selected>" & data(x,1) & "</option>"
    End if 
   Else
    if data(x,0) <> request("ddlCustID") then
     response.write "<option value = "& data(x,0) & " visible=true>" & data(x,1) & "</option>"
    Else
     response.write "<option value = "& data(x,0) & " visible=true selected>" & data(x,1) & "</option>"
    End if   
   End if
  Next
 End if
%>
<script language="javascript">
function idChange() {
  var isMapping = true;
 
  a = form1.inputid.value;

  for( i=1; i<<%=counter%>; i++ ){
    c = form1.custid.options[i].value;  --获取ID
    d = form1.custid.options[i].text;    --获取Name
       
    if( c==a ){
      form1.custid.selectedIndex = i;
      isMapping = false;
      break;
    }
    else {
      if( c.indexOf(a)==0 && isMapping ) {
        form1.custid.selectedIndex = i;
        isMapping = false;
        break;
      }
    }
   
   if( d==a ){
      form1.custid.selectedIndex = i;
      isMapping = false;
      break;
    }
    else {
      if( d.indexOf(a)==0 && isMapping ) {
        form1.custid.selectedIndex = i;
        isMapping = false;
        break;
      }
    }
  }
 
  if(isMapping) {
    form1.custid.selectedIndex = 0;
  }
  if( a=="" ) {
    form1.custid.selectedIndex = 0;
  }

}

 

function sellerChange() {
  form1.inputid.value = form1.custid.value
}
</script>