转自：http://blog.doyoe.com/article.asp?id=163
一个既可以选择又可以输入的下拉框select，应该说已经有不少的人都写过了，虽然简单，但方法也不尽相同，适用性也有强有弱。
之所以要写这么一个东东，当然是因为有这个需求才写的。在网上找了半天虽然也找到一些不错的demo，但有的要么太复杂了，有的要么不够完美，和我想要的总有那么一点出入，所以只好自己写一个了。
由于是要让select变得可以输入，很简单的就会让我们想到在其上覆盖一个input输入框。让其只遮住select的左半部分，右边的选择按钮仍留在外，这样就会变得可以输入了。按照这个想法，一个demo很快就出来的，一路测试，几乎适用于我机器上的所有浏览器，但最后却栽在了ie6及以下浏览器的手里 - -!
事情总是不那么喜欢顺着你的思维去发展，我们大家或许都知道select和iframe等这样的东东在ie6及以下浏览器中的层次是非常高的。它们不允许有其它的东西来抢它们的风光，于是所有想遮住它们“绝世容颜”的“刺客”最后都会被它们镇压在身下。可怜的input也难逃此劫。
既然这种方法的适用性还不够完美，那么就换一个思路。反正只要将select左边的那个框框变成可输入就行。既然遮也遮不住，那剪掉总该行了吧。
有了思路，做起事情来就非常顺手，很快又以个demo也出来了，这回ie6及以下浏览器也老实了，乖乖束手。
【演示地址：http://www.doyoe.com/model/xhtmlcss/style/DYsw.htm】
XHTML 部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>可选择可输入的下拉框</title>
<meta name="Author" content="Doyoe(飘零雾雨), edzmaster@gmail.com" />
</head>
<body>
<form method="post" action="#">
<p class="dys"><select name="oks" id="oks" onchange="document.getElementById('okw').value=this.value;">
<option value="可输入的下拉框">可输入的下拉框</option>
<option value="输入文字试试">输入文字试试</option>
<option value="下拉选择试试">下拉选择试试</option>
</select></p>
<p class="dyw"><input type="text" name="okw" id="okw" value="可输入的下拉框" /></p>
</form>
</body>
</html>
CSS部分：
form,p {
margin:0;
padding:0;
}
form {
position:relative;
}
.dys {
position:absolute;
z-index:5;
left:111px;
width:18px;
overflow:hidden;
}
.dys select {
margin-left:-111px;
width:129px;
}
.dyw {
position:absolute;
z-index:4;
#top:-1px;
}
.dyw input {
width:113px;
voice-family:"\"}\"";
voice-family:inherit;
width:110px;
#width:107px;
}
当然，这里还可以使用clip来裁剪select，不过我没有去做这个Demo，有兴趣的朋友可以直接的试试，思路基本类似。
分享到：
相关推荐
在这种情况下，“asp.net可输入可选择下拉框”应运而生，它结合了文本框和下拉框的优点，提供了更灵活的交互体验。 首先，我们需要理解这个自定义用户控件的工作原理。通常，它是通过JavaScript或者jQuery在客户端...
`<select>`可以有多个`<option>`子元素，每个`<option>`代表一个可选值。 2. **jQuery库**：jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果。在这里，我们将用到jQuery来绑定事件、获取/设置...
"可输入的下拉框组件"是一个常见的UI元素，广泛应用于各种Web应用和桌面软件中。这样的组件结合了传统的下拉框与搜索输入框的功能，极大地提高了用户在大量数据选择时的便捷性。 首先，我们来理解一下“下拉框”的...
下拉框选择已有固定value，也可以选择后进行编辑，也可以直接输入数值。
`jqueryEditableSelect`这个文件名可能是一个插件，它提供了现成的解决方案，简化了实现"可输入的下拉框"的过程。使用这样的插件，开发者只需简单地调用插件方法，设置一些配置项，即可快速集成这一功能。例如： ``...
可编辑的下拉框 既可以编辑，又可以下拉选择 很不错的
通过以上步骤，我们就创建了一个在`DataGridView`中既可选择也可自定义输入的下拉框。这样的设计提高了用户体验，使得用户可以根据需要自由选择或输入数据，同时确保了数据的有效性和一致性。 在提供的`WinFormAPP`...
将CheckBox Text两个空间结合，简易的制作可输入下拉框
这个可手写输入的下拉框设计简洁，代码量小，易于集成到项目中。开发者可以快速实现这一功能，为用户提供更加直观和个性化的输入方式。在一些特定场景下，例如对中文、日文、韩文等非拉丁字符集的支持，手写输入特别...
传统的HTML `<select>` 标签仅允许用户从预定义的选项中选择，但可输入下拉框允许用户在输入时获取匹配建议，从而提供更灵活、高效的搜索体验。下面我们将深入探讨这种技术的工作原理、实现方式以及其相关的源代码。...
在网页开发中，"可文本输入...通过以上讨论，我们可以看到“可文本输入的下拉框select”是一个结合了传统HTML元素与动态交互设计的功能，它需要开发者具备HTML、CSS和JavaScript基础知识，以及良好的用户体验设计思维。
例如，可以创建一个省份下拉框和一个城市下拉框，当用户选择了省份时，城市下拉框将自动更新以显示该省份下的城市列表。 七、ASP.NET 中 JS+JQuery 添加下拉框值和后台获取示例 在 ASP.NET 中，可以使用 JS 和 ...
以上就是两种创建可输入下拉框的方法。在实际项目中，可以根据需求和兼容性考虑选用合适的方式。同时，我们可以通过CSS来定制样式，使交互更加友好和美观。记得在开发过程中，始终以用户为中心，提供流畅、直观的...
在IT行业中，创建一个“可以输入带自动匹配的下拉框”是常见的需求，尤其在网页交互设计中。这样的功能通常被称作自动补全（AutoComplete）或智能搜索框，它极大地提升了用户输入数据的效率和用户体验。下面将详细...
在主页面（.aspx）中，你可以像使用普通ASP.NET控件一样使用这个自定义的可输入下拉框控件。 ```xml ~/CustomDDL.ascx" %> ``` 通过这样的实现，我们可以为用户提供一个既方便选择又支持自定义输入的下拉框控件。...
在IT领域，尤其是在前端开发中，"下拉框自动匹配文本框输入内容"是一个常见的功能需求，主要用于提高用户输入的效率和准确性。这个小例子旨在帮助新手理解如何实现这一功能。下拉框（Dropdown）与文本框（Input）的...
标题中的“可输入的下拉框（autoComplete）”指的是自动完成或自动填充功能，它在用户界面设计中被广泛使用，特别是在Web表单和移动应用中。这种功能结合了文本输入框和下拉列表，当用户在输入框中键入文字时，系统...
支持手动输入的下拉框，即用户可以在一个下拉框中输入文字，系统会根据输入内容动态展示匹配的建议列表。这种设计提升了用户体验，因为它减少了用户在大量选项中查找所需项的时间，同时允许用户输入未包含在预设选项...
3. **React实现**：React使用组件化思想，可以自定义一个可输入下拉框组件。通过状态管理和事件处理函数，实现输入框和下拉列表的联动。`react-select`是一个广泛使用的React库，提供了丰富的定制选项和性能优化。 ...
4. Vue.js、React等前端框架：它们提供了组件化开发方式，也有对应的可输入下拉框组件。 五、代码示例 以下是一个使用纯JavaScript实现的简单例子： ```html <option value="option1">Option 1 ...