可输入及自动定位(自动匹配)的下拉列表

最新推荐文章于 2022-05-27 16:48:07 发布
原创 最新推荐文章于 2022-05-27 16:48:07 发布 · 置顶 · 1.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#测试 #function #generator #html #javascript #input

本文介绍了一个简单的HTML页面，该页面通过JavaScript实现了输入框与下拉选择器的联动功能。当用户在输入框中输入特定值时，能够自动匹配并选中下拉选择器中的对应选项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<FORM METHOD=POST ACTION="">
<input type="hidden" name="unitCode" value="">
<input type=text name="unitName" style="width:220px;height:21px;font-size:10pt;" onkeyup="seletIt(this);" onfocus="txtFocus();"><span style="width:18px;border:0px solid red;">
<select name="unitOption"  onChange="changeOption();" style="margin-left:-220px;width:238px; background-color:#FFEEEE;">
  <option value="001">001 [测试数据001]</option>
  <option value="002">002 [测试数据001]</option>
  <option value="003">003 [测试数据001]</option>
  <option value="101">101 [测试数据001]</option>
  <option value="102">102 [测试数据001]</option>
  <option value="112">112 [测试数据001]</option>
  <option value="122">122 [测试数据001]</option>
  <option value="222">222 [测试数据001] </option>
  <option value="203">203 [测试数据001]</option>
  <option value="224">224 [测试数据001]</option>
  <option value="305">305 [测试数据001]</option>
    </select></span>
</FORM>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
 function txtFocus()
  {
     document.all.item("unitCode").value="";
  document.all.item("unitName").value="";
  }
 function seletIt(crtObj)
 {
    var crtObjValue=crtObj.value;
 var selectObj=document.all.item("unitOption");
    if(crtObjValue!=null&&crtObjValue.length==3&&selectObj!=null)
 {
    for(var i=0;i<selectObj.length;i++)
    {
       if(selectObj.options[i].value.indexOf(crtObjValue)==0)
    {
               selectObj.options[i].selected=true;
      document.all.item("unitName").value=selectObj.options[i].text;
      document.all.item("unitCode").value=selectObj.options[i].value;
      selectObj.focus();
      break;
    }
    }
 }
  }
  function changeOption()
  {
    var selectObj=document.all.item("unitOption");
   for(var i=0;i<selectObj.length;i++)
   {
   if(selectObj.options[i].selected)
   {
     document.all.item("unitName").value=selectObj.options[i].text;
     document.all.item("unitCode").value=selectObj.options[i].value;
     selectObj.focus();
   }
   }
  }
//-->
</SCRIPT> 

MFC如何实现CComboBox输入框输入内容，下拉框自动匹配内容在下拉列表上方显示功能
qq_37905273的博客
12-06 5335
备注:下拉框中所有的字符串和字符串的数量都写入了配置文件之中，程序初始化时会从配置文件中读取字符串添加到下拉框。 大致如下：[COMSTR] NUM=3 Str01=hello Str02=world Str03=mfc 两个自定义函数: 函数名：GetPrivateProString 功能：从INI文件获取指定节中的指定字段，该值为字符串，若指定文件或者节名不存在，则返回缺省字符串 参数...
python+selenium之元素、下拉列表的定位
weixin_43977279的博客
04-12 4724
八大元素和下拉列表的定位 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：python 自动化----1、元素定位+下拉列表的定位 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录八大元素和下拉列表的定位前言一、八大元素定位1.环境的安装和注意点id元素定位name元素定位classname元素定位tagname元素定位link text元素定位partial_link_text元素定位xpath定位CSS定位元素组定位方式By的定位方式二、下拉列表定位
使用JQuery UI完成可输入内容且自动匹配的的下拉列表
01-12
下拉列表和自动完成框（Autocomplete）的组合使用
根据键盘输入，下拉框自动定位
07-08
自动定位到以键盘输入字母开头的城市。HTMLPage.htm为启动页面，pinyin.aspx是请求页面。
可编辑可自动匹配的联动下拉框实现
馨新欣心
03-03 1400
html代码 项目城市： 请选择 #if($!{cityList}) #foreach($city in $!{cityList}
js在编辑框input下根据输入内容显示匹配内容的下拉列表
01-27
实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单： 将匹配的内容放在一个div中，input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题： input的onblur中隐藏下拉div div的onmouseup 将选择的li内容设置到input 鼠标从Input移到下拉div并点击其中一个li的过程： onmousemove => onblur => onmousedown => onmouseup 这问题两手的地方是是当点击li之前触发onblur，会隐藏下拉div, 则不再触发onmousedown 现在解决办法有两个： 方案1： 触发Onmousemove时获取当前鼠标位置 在onblur事件时判断之前获取鼠标位置是否在下拉div的内部，如果在不隐藏下拉div,反之隐藏下拉div 方案2： 在触发onmousemove时设置标志 在触发onblur时判断标志，如果标志没有设置则隐藏下拉div 若标志已设置，为防止在下拉div外点击触发onblur,则需定时如300ms后对下拉div进行隐藏 若点击的是下拉div则位触发onmouseup事件，则些事件中取消前面设置的定时器
NSComboBox输入字符时自动打开下拉菜单并匹配
jiaoguifeng的专栏
12-23 3226
NSComboBox，此功能实现的效果图如下图所示： 1.      首先调用NSComboBox的父类NSTextField的delegate方法，实现实时输入监测。其中比较关键的方法是-(void)controlTextDidChange:(NSNotification*)notification,这个方法可以实现输入内容的实时监测。          -(void)control
可输入的html下拉列表框，自带筛选
01-26
"可输入的HTML下拉列表框，自带筛选"是一种优化用户体验的常见功能，它允许用户在下拉菜单中通过输入关键字来快速定位并选择所需项，极大地提高了操作效率。这种技术主要涉及到HTML、CSS以及JavaScript等前端技术，...
网页表单自动填写——下拉列表框、单选框、复选框自动填写方法
06-17
4. **自动获取**：利用工具提供的“自动获取”功能，定位到目标下拉列表框。 接下来，根据具体需求选择合适的实现方法： **方法一：通过value值实现** - **原理**：大多数下拉列表框都为每个选项设置了`value`...
JavaScript实现点击文本自动定位到下拉框选中操作
10-22
form元素包含一个或多个输入控件，如文本框、单选按钮、复选框和下拉列表。 3. HTML select元素：select元素定义了一个下拉列表。option元素用于定义列表中的选项。 4. JavaScript DOM操作：文档对象模型（DOM）是...
可输入下拉列表及文本框自动匹配
08-10
可输入的下拉列表自动匹配及文本框输入自动匹配
ComboBox列表智能过滤，支持非首字符匹配，支持拼音首字母，支持绑定数据源
03-23
在一个项目总ComboBox中有很多项目，用户查找非常麻烦，系统自带的快速定位是匹配首字母，使用起来非常不方便。网上找了很多，都是基于Items.Add()的方式，这种方式不支持数据源的键值对应。所以自己写了一个，发上来给大家分享!
ASP .NET 可编辑，输入自动匹配的下拉框
03-24
ASP .NET Webform 利用Telerik第三方Dropdownlist控制实现可编辑，输入自动匹配的下拉框（支持中文输入匹配），代码简单，适合下拉列表选项多时使用该控件，快速检索选项
JQUERY动态菜单栏添加
02-24
功能其实比较简单，可以提供给为初级选手座位参考
将下拉框锁定，以便进行定位
weixin_44123630的博客
02-24 738
setTimeout(function(){debugger;},5000)
下拉框（可输入+自动匹配）
weixin_30493321的博客
10-23 1894
实现可输入+带自动匹配功能的下拉框，我试过以下几种方法： 1.直接使用h5的新标签<datalist>，对应demo如下： <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="F...
qt QComboBox 自动查找匹配项功能实现
qusuo的专栏
06-28 7264
为QCombox 添加QCompleter; //////////////////////////////////////////////////// QComboBox  *cmbTest = new QCombox; QCompleter *pCompleter = new QCompleter(cmbTest->model(), this); cmbTest->setCo
Cypress 定位、操作页面元素
qiaotl的博客
05-27 4135
Cypress系列文章三：Cypress 定位、操作页面元素
基于autocomplete.js实现可编辑可输入文字模糊匹配下拉选项
1. 可编辑可输入文字模糊匹配下拉选项：Autocomplete.js 允许用户在输入框中输入文字，并根据输入的文字实时匹配下拉选项，显示相关的下拉项列表。 2. 模糊匹配算法：Autocomplete.js 使用模糊匹配算法来匹配用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值