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

a2048 2013-08-16 11:45:35
测试代码：
<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要匹配到下拉框里的数据？
...全文
282 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
fzfei2 2013-08-20
  • 打赏
  • 举报
 回复
引用 9 楼 a2048 的回复:
//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
	  	}
  	}
  }
a2048 2013-08-20
  • 打赏
  • 举报
 回复
JavaScript大神们帮忙看看。等会儿就结贴了。
a2048 2013-08-19
  • 打赏
  • 举报
 回复
为什么加了关闭下来框代码后，在鼠标左击拖选到文本框外再放开鼠标左键，这时下拉框消失了。有没有办法出现上面这种情况后只要删除被选中的内容后下拉框就自动出来或者鼠标点击到文本框里后下拉框就出来。
hch126163 2013-08-16
  • 打赏
  • 举报
 回复
用正则啊。。。
fzfei2 2013-08-16
  • 打赏
  • 举报
 回复
你稍改了下， <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>
街头小贩 2013-08-16
  • 打赏
  • 举报
 回复
输入C C怎么匹配到<option >C C</option> re: 匹配不到吗？
a2048 2013-08-16
  • 打赏
  • 举报
 回复
//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'; } } 加上这段代码后能实现鼠标在文本框外边一点击就关闭或退出下拉框，但现在又发现一个问题如果在文本框输的内容错后左击鼠标键拖选到文本框外再放开鼠标左键，这时下拉框也没有了。只有在文本框外点击一下后，再点击文本框内下拉框就出来了。 有没有办法出现上面这种情况后只要删除被选中的内容后下拉框就自动出来。
KissZjs 2013-08-16
  • 打赏
  • 举报
 回复
首先将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;
    }
}
fzfei2 2013-08-16
  • 打赏
  • 举报
 回复
引用 6 楼 a2048 的回复:
[quote=引用 5 楼 fzfei2 的回复:] 那你输出的时候最好转成 htmlCode ，不然多格就不起作用了
一定要读取数据库输出时要转成htmlCode吗？那没有什么好的方法了吗。 还有个小问题：在点击文本框时下拉框就自动打开，但有什么办法不选择下拉框数据时鼠标在文本框外边一点击就关闭或退出下拉框。[/quote] 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'; } }
a2048 2013-08-16
  • 打赏
  • 举报
 回复
引用 5 楼 fzfei2 的回复:
那你输出的时候最好转成 htmlCode ，不然多格就不起作用了
一定要读取数据库输出时要转成htmlCode吗？那没有什么好的方法了吗。 还有个小问题：在点击文本框时下拉框就自动打开，但有什么办法不选择下拉框数据时鼠标在文本框外边一点击就关闭或退出下拉框。
fzfei2 2013-08-16
  • 打赏
  • 举报
 回复
引用 4 楼 a2048 的回复:
[quote=引用 2 楼 fzfei2 的回复:] 你稍改了下， <option >C C</option>里的多空格 要用 多个 才有效果
下拉框里的数据是从数据库里取的，没有 的。[/quote] 那你输出的时候最好转成 htmlCode ，不然多格就不起作用了
a2048 2013-08-16
  • 打赏
  • 举报
 回复
引用 2 楼 fzfei2 的回复:
你稍改了下， <option >C C</option>里的多空格 要用 多个 才有效果
下拉框里的数据是从数据库里取的，没有 的。
jquery获取下拉框中的循环值
本文主要介绍了jquery获取下拉框中的循环值的方法。具有很好的参考价值，下面跟着小编一起来看下吧
LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格（详见官网） 根据官网示例 做出数据表格 示例根据官网表格展示 在layui官网 数据表格示例中 https://www.layui.com/demo/ 修改部分内容 例如表格上方需要加上筛选的表单 有文本框可搜索下拉框等。 在顺便更改数据表格的limit和limits参数 将每页显示条数加到1000条 发现数据表格稍稍卡顿但是还算流畅 而上面的form表单一一测试 普通的输入框不卡顿 下拉框卡顿 且点击和退
支持手动输入的下拉框组件设计与实现
在现代Web应用开发中，用户交互体验的优化已成为前端设计的核心目标之一。支持手动输入的下拉框（Combobox）融合了文本输入框与选择列表的功能，允许用户从预设选项中选择或直接输入自定义值，显著提升数据录入效率与灵活性。该组件广泛应用于搜索建议、地址填写、标签管理等场景，在电商商品搜索、CRM客户筛选和配置平台参数设置中发挥关键作用，兼顾用户体验与数据准确性，为后续技术实现提供明确需求导向。理想的可输入下拉框应遵循以下四大设计原则：默认情况下，Select2 仅允许从预设选项中选择值。
树控件、下拉框、文本框常用测试用例
下拉框里面有很多选项像省份可以划分下等价类，两个字的，三个字的，四个字的。有时它的内容是根据其他要素变化的，比如城市的下列框的内容，是根据省份变化而联动的；或者根据登录者的权限不同，下拉列表的内容也不一样。这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！5）执行了某一操作或数据有变化后，修改后的数据是不是在正确的位置上，状态是否正确，排序是否正确。2、中文、英文、空格，数字，字符，下划线、单引号 等所有特殊字符的组合；
搜索内容中，包含空格
搜索内容中，包含空格，使关键词分隔 有以下几种情况出现 1. 搜索内容前带空格，则搜索下拉框中无法匹配到该数据 空格作为一个字符存在，前后端没有做处理，则数据匹配时就很容易出现错误 2. 搜索内容中带空格，则关键词分隔 未做处理时，则关键词直接分隔成多个，搜索接口可能出现： 1.返回分隔后的关键词信息； 2.搜索接口直接报错； 3.过滤空格后，正常搜索该功能 3...
JavaScript

87,991

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章