根据输入内容匹配下拉框，但下拉框数据有多个空格怎么来匹配？

测试代码：
<HTML>
<HEAD>
<TITLE>可根据输入匹配选项</TITLE>
</HEAD>
<Script Language="JavaScript">
<!--
   var whichText;
    function selectStation(obj) {
   var objSelStation = obj;
        if (obj.selectedIndex != -1) {
            var stationName = obj.options[obj.selectedIndex].text;
            whichText.value = stationName;
        }
        showDivStation(this, false,'selStation')//鼠标单击某一选项选定后关闭下拉框
    }//响应text的事件
   var pageD =0, pageU;
    function similarFind(txtObj,seledName) {
var curStationName = (txtObj.value).toUpperCase();
        var objSelStation = eval("document.myform."+seledName);//根据实际的form name修改
        var stationLength = objSelStation.options.length;
   pageU = pageD;
        
//匹配用text中的数据跟下拉框中的数据
        for (var i=0; i<stationLength; i++) {
            var stationName = objSelStation.options[i].text;
            var re = new RegExp("^" + curStationName);
       if (stationName.match(re)) {
                if (i<stationLength - 10) {
                    objSelStation.selectedIndex = i + 10;
                }
                objSelStation.selectedIndex = i;
       pageD = i;
       pageU = i;
                break;
            }
        }
//响应下移键
   if(event.keyCode==40) {
     pageD++;
     if(pageD==objSelStation.options.length) pageD=0;
     txtObj.value=objSelStation.options[pageD].text ;
     objSelStation.selectedIndex = pageD;
   }
//响应上移键
   if(event.keyCode==38) {
     --pageU;
     if(pageU<0) pageU=objSelStation.options.length-1;
     txtObj.value = objSelStation.options[pageU].text;
     objSelStation.selectedIndex = pageU;
    }
}
//下拉框显示位置
    function showDivStation(obj, b,selName) {
        var divStation = eval("document.myform."+selName);//根据实际的form name修改
        if (b) {
            whichText = obj;
            divStation.style.top = 20;
            divStation.style.left = 0;
            divStation.style.display="block";
            similarFind(obj,selName);
        } else {
            divStation.style.display="none";
        }
    }
//-->
</Script>
<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<form name="myform" >
<table border="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
     <td width="6%" valign="top">城市</TD>
     <td width="94%" bgcolor="#FFFFFF"> 
    <!-- onfocus获取焦点时弹出下拉框 onkeyup按上下键时在下拉框中移动 -->
    <input type="text" size="70" name="put" style="width:120" onfocus="showDivStation(this, true,'selStation')" onkeyup="similarFind(this,'selStation')" value=""> 
    <!-- onclick鼠标点击时选择选项 -->
    <select name="selStation" size="6" style="display:none;width:120;" onclick="selectStation(this)">
      <option>AA</option>
      <option>BB</option>
      <option >湖北</option>
      <option>湖南</option>
      <option >广东</option>
      <option >CC</option>
      <option >C C</option>
      <option >C  C</option>
      <option >C   C</option>
    </select>
   </td>
</table>
</form>
</BODY>
</HTML>现在问题如果输入C   C怎么匹配到<option >C   C</option>
就是输入C后面有是三个空格再加上C要匹配到下拉框里的数据？

解决方案 »

  1.   

    输入C   C怎么匹配到<option >C   C</option>re:
    匹配不到吗？
      

  2.   

    你稍改了下， <option >C   C</option>里的多空格 要用 多个&nbsp;才有效果<HTML>
    <HEAD>
    <TITLE>可根据输入匹配选项</TITLE>
    </HEAD>
    <Script Language="JavaScript">
    <!--
       var whichText;
        function selectStation(obj) {
       var objSelStation = obj;
            if (obj.selectedIndex != -1) {
                var stationName = obj.options[obj.selectedIndex].text;
               
                whichText.value = stationName;
            }
            showDivStation(this, false,'selStation')//鼠标单击某一选项选定后关闭下拉框
        }//响应text的事件
       var pageD =0, pageU;
        function similarFind(txtObj,seledName) {
    var curStationName = (txtObj.value).toUpperCase();
            var objSelStation = eval("document.myform."+seledName);//根据实际的form name修改
            var stationLength = objSelStation.options.length;
       pageU = pageD;
            
    //匹配用text中的数据跟下拉框中的数据
            for (var i=0; i<stationLength; i++) {
                var stationName = objSelStation.options[i].text;
               //var re = new RegExp("^" + curStationName);
        
            curStationName=curStationName.replace(/ /g,'\xa0');
            
           if (stationName.indexOf(curStationName)==0) {
                    if (i<stationLength - 10) {
                        objSelStation.selectedIndex = i + 10;
                    }
                    objSelStation.selectedIndex = i;
           pageD = i;
           pageU = i;
                    break;
                }
            }
    //响应下移键
       if(event.keyCode==40) {
         pageD++;
         if(pageD==objSelStation.options.length) pageD=0;
         txtObj.value=objSelStation.options[pageD].text ;
         objSelStation.selectedIndex = pageD;
       }
    //响应上移键
       if(event.keyCode==38) {
         --pageU;
         if(pageU<0) pageU=objSelStation.options.length-1;
         txtObj.value = objSelStation.options[pageU].text;
         objSelStation.selectedIndex = pageU;
        }
    }
    //下拉框显示位置
        function showDivStation(obj, b,selName) {
            var divStation = eval("document.myform."+selName);//根据实际的form name修改
            if (b) {
                whichText = obj;
                divStation.style.top = 20;
                divStation.style.left = 0;
                divStation.style.display="block";
                similarFind(obj,selName);
            } else {
                divStation.style.display="none";
            }
        }
    //-->
    </Script>
    <BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
    <form name="myform" >
    <table border="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
    <tr>
         <td width="6%" valign="top">城市</TD>
         <td width="94%" bgcolor="#FFFFFF"> 
        <!-- onfocus获取焦点时弹出下拉框 onkeyup按上下键时在下拉框中移动 -->
        <input type="text" size="70" name="put" style="width:120" onfocus="showDivStation(this, true,'selStation')" onkeyup="similarFind(this,'selStation')" value=""> 
        <!-- onclick鼠标点击时选择选项 -->
        <select name="selStation" size="6" style="display:none;width:120;" onclick="selectStation(this)">
          <option>AA</option>
          <option>BB</option>
          <option >湖北</option>
          <option>湖南</option>
          <option >广东</option>
          <option >CC</option>
          <option >C&nbsp;C</option>
          <option >C&nbsp;&nbsp;C</option>
          <option >C&nbsp;&nbsp;&nbsp;C</option>
        </select>
       </td>
    </table>
    </form>
    </BODY>
    </HTML>
      

  3.   


    下拉框里的数据是从数据库里取的，没有&nbsp;的。
      

  4.   


    下拉框里的数据是从数据库里取的，没有&nbsp;的。
    那你输出的时候最好转成 htmlCode ，不然多格就不起作用了
      

  5.   


    一定要读取数据库输出时要转成htmlCode吗？那没有什么好的方法了吗。还有个小问题：在点击文本框时下拉框就自动打开，但有什么办法不选择下拉框数据时鼠标在文本框外边一点击就关闭或退出下拉框。
      

  6.   


    一定要读取数据库输出时要转成htmlCode吗？那没有什么好的方法了吗。还有个小问题：在点击文本框时下拉框就自动打开，但有什么办法不选择下拉框数据时鼠标在文本框外边一点击就关闭或退出下拉框。web后台语言应该都有想对应的转码函数吧
    1，如果你 option 里的value属性没用，可以写在value里，用value属性做判断,这样在显示的时时候还是没法体现多空格
    2，后台生成JS，让JS来生成 option
    //JS里加上这段 关闭 拉框
      document.onmouseup=function(evt){
       var evt=window.event||evt;
       var el=evt.target||evt.srcElement;
       if(el.name!='put' && el.name!='selStation' ){
       document.myform.selStation.style.display='none';
       }
      }
      

  7.   

    首先将select的代码改成如下：<select name="selStation" size="6" style="display:none;width:120;" onclick="selectStation(this)">
          <option value='AA'>AA</option>
          <option value='BB'>BB</option>
          <option value='湖北'>湖北</option>
          <option value='湖南'>湖南</option>
          <option value='广东'>广东</option>
          <option value='CC'>CC</option>
          <option value='C C'>C&nbsp;C</option>
          <option value='C  C'>C&nbsp;&nbsp;C</option>
          <option value='C   C'>C&nbsp;&nbsp;&nbsp;C</option>
        </select>改完html代码后，将similarFind方法修改成如下即可：function similarFind(txtObj, seledName) {
        var curStationName = (txtObj.value).toUpperCase();
        var objSelStation = eval("document.myform." + seledName); //根据实际的form name修改
        var stationLength = objSelStation.options.length;
        pageU = pageD;    //匹配用text中的数据跟下拉框中的数据
        for (var i = 0; i < stationLength; i++) {
            var stationName = objSelStation.options[i].value;
            var re = new RegExp("^" + curStationName);
            if (stationName.match(re)) {
                if (i < stationLength - 10) {
                    objSelStation.selectedIndex = i + 10;
                }
                objSelStation.selectedIndex = i;
                pageD = i;
                pageU = i;
                break;
            }
        }
        //响应下移键
        if (event.keyCode == 40) {
            pageD++;
            if (pageD == objSelStation.options.length) pageD = 0;
            txtObj.value = objSelStation.options[pageD].text;
            objSelStation.selectedIndex = pageD;
        }
        //响应上移键
        if (event.keyCode == 38) {
            --pageU;
            if (pageU < 0) pageU = objSelStation.options.length - 1;
            txtObj.value = objSelStation.options[pageU].text;
            objSelStation.selectedIndex = pageU;
        }
    }
      

  8.   


    //JS里加上这段 关闭 拉框
      document.onmouseup=function(evt){
       var evt=window.event||evt;
       var el=evt.target||evt.srcElement;
       if(el.name!='put' && el.name!='selStation' ){
        document.myform.selStation.style.display='none';
       }
      }
    加上这段代码后能实现鼠标在文本框外边一点击就关闭或退出下拉框，但现在又发现一个问题如果在文本框输的内容错后左击鼠标键拖选到文本框外再放开鼠标左键，这时下拉框也没有了。只有在文本框外点击一下后，再点击文本框内下拉框就出来了。
    有没有办法出现上面这种情况后只要删除被选中的内容后下拉框就自动出来。
      

  9.   

    JavaScript大神们帮忙看看。等会儿就结贴了。
      

  10.   


    改了下，只有点击除 输入框，下拉框外，才能关闭  var isMDown;
      document.onmouseup=document.onmousedown=function(evt){
       var evt=window.event||evt;
       var el=evt.target||evt.srcElement;
       if(el.name!='put' && el.name!='selStation' ){
       if(evt.type=='mousedown'){
       isMDown=1;
       return ;
       }else if(isMDown){
       document.myform.selStation.style.display='none';
       isMDown=0
       }
       }
      }