<%@ page contentType="text/html; charset=gb2312"%>
<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;
}
var stobj= document.getElementsByName('hospitalCode')[0];
//鼠标单击某一选项选定后关闭下拉框
showDivStation(this, false,'hospitalCode')
}
//响应text的事件
var pageD =0, pageU;
function similarFind(txtObj,seledName) {
var curStationName = txtObj.value;
var objSelStation = document.getElementsByName(seledName)[0];
var stationLength = objSelStation.options.length;
var flag = true;
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;
flag = false;
break;
}
}
////从文字中匹配 用text中的数据跟下拉框中的数据
if(flag) {
for (var i=0; i<stationLength; i++) {
var stationName = objSelStation.options[i].text;
var re2 = new RegExp("^.*" + curStationName+'.*$');
if (stationName.match(re2)) {
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 = document.getElementsByName(selName)[0]
if (b) {
whichText = obj;
divStation.style.display="block";
similarFind(obj,selName);
} else {
divStation.style.display="none";
}
}
function removeNull(node) {
if(node.value=='--未选择--')
node.value = '';
}
//-->
</Script>
<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<form name="caseLhBaseForm">
<table>
<tr>
<td valign="top">医院</TD>
<td>
<input type="text" name="hospitalCodeName"
style="width: 330px"
onfocus="showDivStation(this, true,'hospitalCode')"
onclick="removeNull(this)"
onkeyup="similarFind(this,'hospitalCode')"
value="--未选择--">
<select size="6" name="hospitalCode"
style="display: none; width: 330px;"
onclick="selectStation(this)">
<option value="">--未选择--</option>
<option value="340403007">北京上地医院</option>
<option value="340402006">北京回龙观医院</option>
<option value="340401005">北京中关村医院</option>
<option value="340401005">上地第二医院</option>
<option value="340403007">回龙观第二医院</option>
<option value="340402006">朝阳医院</option>
<option value="340401005">海淀医院</option>
<option value="340401005">东城区医院</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
分享到：
相关推荐
在JavaScript和jQuery的世界里，"js 可输入下拉框（jquery）"是一个常见的交互设计需求，它结合了传统下拉框的简洁性与输入框的搜索功能，为用户提供更友好的交互体验。这种组件通常被称为“Autocomplete”或...
开发者可以通过查看和学习这些文件，了解具体的实现细节和技巧，以便在自己的项目中应用或改进这种可输入可选择的下拉框控件。 总之，"asp.net可输入可选择下拉框"是一种增强用户体验的设计，它通过结合传统的...
"可输入的下拉框"是一种常见的交互元素，它结合了传统下拉菜单与搜索输入框的功能，使得用户在选择选项时可以更加高效和精确。这种设计常见于网页和应用程序中，用于提供多样化的选择并允许用户通过输入关键词快速...
可输入下拉框广泛应用于地址搜索、商品搜索、推荐系统等场景，如Google搜索栏、电商网站的搜索框等。 总的来说，"可输入下拉框"是Web开发中一种实用的交互元素，通过结合HTML、CSS和JavaScript，可以创建出高效、...
开发者可能会利用库或框架，如React、Vue或Angular，它们提供了丰富的组件库，包括可输入下拉框的实现。这些框架允许开发者通过简单的配置和API调用来实现复杂的功能，比如事件监听、数据绑定和动态过滤。 在实际...
本项目"jquery实现百度搜索关键字输入下拉框提示"是利用 jQuery 实现类似百度搜索框的功能，即用户在输入框中输入关键词时，能实时显示与关键词相关的下拉提示，提高用户的搜索体验。 首先，`index.html` 是网页的...
本文将详细介绍 ASP.NET 可编辑输入自动匹配的下拉框的实现方法，该控件可以自动匹配用户输入的内容，并提供相关的下拉选项。本文将从三个方面介绍该控件的实现方法：首先，介绍如何在 ASP.NET 项目中添加 Telerik ...
标题中的“可输入的下拉框（autoComplete）”指的是自动完成或自动填充功能，它在用户界面设计中被广泛使用，特别是在Web表单和移动应用中。这种功能结合了文本输入框和下拉列表，当用户在输入框中键入文字时，系统...
带搜索功能的select下拉框，类似百度google的搜索框，自己匹配，很好用
实现“可文本输入的下拉框”有多种方法。一种常见的方法是创建一个组合控件，包含一个输入框和一个下拉列表。当用户开始在输入框中输入时，下拉列表会动态过滤出匹配的选项。用户可以选择列表中的一个项，或者继续...
针对这一情况，"可手写输入的下拉框"提供了一种创新解决方案，允许用户通过手写方式进行输入，增强了交互性和可用性。 这个可手写输入的下拉框设计简洁，代码量小，易于集成到项目中。开发者可以快速实现这一功能，...
4. Vue.js、React等前端框架：它们提供了组件化开发方式，也有对应的可输入下拉框组件。 五、代码示例 以下是一个使用纯JavaScript实现的简单例子： ```html <option value="option1">Option 1 ...
可编辑的下拉框控件允许用户不仅能够从预定义的选项列表中选择，还能直接输入文本，这为用户提供了更大的灵活性。在ASP.NET中，默认的DropDownList控件并不具备直接编辑的功能，但通过一些定制的代码和JavaScript...
3. **React实现**：React使用组件化思想，可以自定义一个可输入下拉框组件。通过状态管理和事件处理函数，实现输入框和下拉列表的联动。`react-select`是一个广泛使用的React库，提供了丰富的定制选项和性能优化。 ...
实现可输入下拉框的常见方法有以下几种： 1. **HTML `<select>` 元素与 `<input>` 结合**：通过将一个隐藏的输入框与下拉列表并排放置，利用JavaScript监听事件来同步两者状态。 2. **HTML5 `<datalist>` 元素**：这...
可输入的下拉框 可以用来做模糊查询 可输入的下拉框 可以用来做模糊查询
百度和Google的搜索框都包含了可输入下拉框，能够根据用户的输入提供即时的搜索建议，大大提升了搜索效率。 在"压缩包子文件的文件名称列表"中，我们看到有两个文件：drpControl1和WebApplication1。drpControl1...
本文将详细探讨"php可输入下拉框控件"这一主题，结合其描述和标签，我们将深入理解如何在PHP环境中实现一个既可输入文字又可下拉选择的组件。 一、下拉框（Dropdown）基础 下拉框是HTML表单中常见的元素，通常使用`...
总之，支持手动输入的下拉框是提高用户体验的重要工具，开发者需要关注其功能实现、性能优化、无障碍性和响应式设计等方面，以提供高效且友好的用户界面。不同的开发技术和库提供了多种实现方法，选择合适的方式取决...