<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态提示的下拉框</title>
<style>
a{color:red;text-decoration:none;font-size:12px}
</style>
</head>
<body onLoad="Init()">
<center>
<h2>动态提示的下拉框</h2>
<hr>
<form name=frm>
<table>
<tr>
<td>请输入1或2或3或4或5进行测试：<br><input name="txt" style="width:100px" onKeyUp="SelectTip(0)"> <input type="button"
value="reset" onClick="SelectTip(1)"></td>
</tr>
<tr>
<td>
<span id="demo"><select name="demo" style="width:100px" size=10 onChange="txt.value=options[selectedIndex].text;">
<option value="1">1</option>
<option value="1">1中</option>
<option value="12">12</option>
<option value="123">123</option>
<option value="1234">1234</option>
<option value="2">2</option>
<option value="23">23</option>
<option value="234">234</option>
<option value="2345">2345</option>
<option value="3">3</option>
<option value="34">34</option>
<option value="345">345</option>
<option value="3456">3456</option>
<option value="5">5</option>
<option value="51">51</option>
<option value="51w">51w</option>
<option value="51wi">51wi</option>
<option value="51win">51win</option>
<option value="51windows">51windows</option>
</select></span>
</td>
</tr>
</form>
</table>
<hr>
<script language="javascript">
var TempArr=[];//存贮option
function Init(){
var SelectObj=document.frm.elements["demo"]
/*先将数据存入数组*/
with(SelectObj)
for(i=0;i<length;i++)TempArr[i]=[options[i].text,options[i].value]
}
function SelectTip(flag){
var TxtObj=document.frm.elements["txt"]
var SelectObj=document.getElementById("demo")
var Arr=[]
with(SelectObj){
var SelectHTML=innerHTML.match(/<[^>]*>/)[0]
for(i=0;i<TempArr.length;i++)
if(TempArr[i][0].indexOf(TxtObj.value)==0||flag)//若找到以txt的内容开头的，添option。若flag为true,对下拉框初始化
Arr[Arr.length]="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>"
innerHTML=SelectHTML+Arr.join()+"</SELECT>"
}
}
</script>
</body>
分享到：
相关推荐
本主题将深入探讨如何使用jQuery动态创建联动下拉框，这是一个常见的需求，特别是在构建多级选择或依赖性选择菜单时。 联动下拉框通常指的是两个或多个下拉框之间存在关联关系，当用户在一个下拉框中选择一个选项时...
动态级联下拉框构件是一种常见的前端交互组件，主要用于实现多级联动选择的效果。在网页设计中，这种组件常用于地址选择、分类筛选等场景，用户在选择一级选项后，二级甚至多级相关的下拉框内容会随之更新，提供更...
本话题将深入探讨如何实现“dataGridView动态绑定数据下拉框”的功能，即在dataGridView的某一列展示一个动态生成的下拉框，其内容来源于数据库字段，并且能够与文件列名建立对应关系，从而实现数据的导入。...
**标题解析：** "AJAXA例子--动态加载下拉框" 这个标题表明我们将探讨一个使用AJAX技术来动态加载下拉框内容的实际示例。AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下，通过后台与服务器...
标题“select2 动态下拉框插件以及开发心得”指出，我们将探讨一个名为“select2”的JavaScript插件，它主要用于创建动态下拉选择框，并且将分享在开发过程中的一些经验和体会。这暗示了我们将深入讨论select2的功能...
这些匹配项随后会被渲染到下拉框中，供用户选择。 ### 实现步骤 1. **引入依赖**：首先需要引入jQuery库和Autocomplete插件的JavaScript及CSS文件。 2. **准备数据源**：可以是静态数组，也可以是动态获取的JSON...
本项目"jquery实现百度搜索关键字输入下拉框提示"是利用 jQuery 实现类似百度搜索框的功能，即用户在输入框中输入关键词时，能实时显示与关键词相关的下拉提示，提高用户的搜索体验。 首先，`index.html` 是网页的...
3. **DOM操作**：使用JavaScript操作DOM（文档对象模型），动态地创建和更新下拉框中的提示列表。 4. **延迟加载**：为了优化性能，可能采用延迟加载策略，即在用户停止输入一段时间后再执行匹配和更新提示的操作。...
标题中的“Ajax自动提示”指的是在网页中使用Ajax技术实现的一种动态输入提示功能。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术通常用于提升...
**jQuery与Layui下拉框搜索提示列表详解** 在Web开发中，用户界面的交互性和易用性是至关重要的。jQuery与Layui结合，可以实现高效且美观的前端功能，例如下拉框的搜索提示列表。这个功能允许用户在输入框中输入...
"超级仿百度 自动搜索提示下拉框"就是一个专门针对这一需求设计的JavaScript对象，它模仿了百度搜索引擎的搜索提示功能，旨在提供一个高效、易用的解决方案。这个功能对于前端开发者来说非常实用，尤其是那些需要...
### 如何利用JavaScript动态改变下拉框的属性 #### 标题解读 本文主要讨论了如何在ASP.NET页面中利用JavaScript脚本来动态地修改下拉框（Select元素）的属性，以此来提升用户体验和增强页面功能。 #### 描述解读 ...
在提供的`提示下拉框.htm`和`js`文件中，很可能包含了上述部分或全部的实现。通过分析这些文件，我们可以深入理解如何在实际项目中应用这些技术。 总的来说，"类似于百度的带提示的下拉框"是前端开发中的一个经典...
- 考虑使用数据绑定，将下拉框选项动态加载，适应数据变化。 总的来说，"C#文本框输入提示功能 下拉框"这个主题涵盖了C#中提高用户交互体验的常见技术，通过学习和实践这些知识，你可以创建更友好、更高效的用户...
类似于goole下拉框，主要是提示下拉框的选择和提示，每次将上次内容删除并重新建立框。
修改网上的代码完成的，使用jquery+JavaScript形式写的，服务端代码用java编写，当然你可以用其他任何语言编写。suggest是MyEclipse的一个工程，直接import既可用。也可以提取里面的文件自己修改
例如，当用户在第一个下拉框中做出选择时，我们可以发送一个AJAX请求到服务器，获取与之相关的第二个下拉框的选项数据，然后动态渲染到页面上： ```javascript fetch('api/relatedOptions?selectedValue=' + this....
在Windows Forms（Winform）开发中，我们经常需要创建用户友好的界面，其中一个常见的需求是实现下拉框（ComboBox）的自动提示功能。这能够帮助用户快速定位他们想要选择的选项，提高应用的交互性和用户体验。本文将...
在VC++编程环境中，下拉框输入提示是一种常见的交互设计，它可以增强用户的使用体验，尤其在需要用户输入特定数据或关键词时。这个“VC 下拉框输入提示-仿搜索提示.rar”压缩包文件提供了一个实现这种功能的示例源码...