读书人
栏目▼

根据输入内容匹配下拉框但下拉框数据

发布时间： 2013-09-06 10:17:17 作者： rapoo

根据输入内容匹配下拉框，但下拉框数据有多个空格怎么来匹配？
测试代码：
<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要匹配到下拉框里的数据？
[解决办法]
你稍改了下， <option >C C</option>里的多空格 要用 多个 才有效果


<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 C</option>
      <option >C  C</option>
      <option >C   C</option>
    </select>
   </td>
</table>
</form>
</BODY>
</HTML>

[解决办法]
首先将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 C</option>
      <option value='C  C'>C  C</option>
      <option value='C   C'>C   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;
    }
}

[解决办法]
引用:
//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';
}
}
加上这段代码后能实现鼠标在文本框外边一点击就关闭或退出下拉框，但现在又发现一个问题如果在文本框输的内容错后左击鼠标键拖选到文本框外再放开鼠标左键，这时下拉框也没有了。只有在文本框外点击一下后，再点击文本框内下拉框就出来了。
有没有办法出现上面这种情况后只要删除被选中的内容后下拉框就自动出来。


改了下，只有点击除 输入框，下拉框外，才能关闭

  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
  }
  }
  }

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net