转自: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,有兴趣的朋友可以直接的试试,思路基本类似。
分享到:
相关推荐
下拉框选择已有固定value,也可以选择后进行编辑,也可以直接输入数值。
目前客户对于下拉框要求越来越高,希望即可以像文本框一样输入,又能够有固定的选项来选择,经过查找一些资料,然后由于项目需要,自己做了这样的用户控件,希望对广大开发者有点借鉴之用。
可编辑的下拉框 既可以编辑,又可以下拉选择 很不错的
将CheckBox Text两个空间结合,简易的制作可输入下拉框
C# winform datagridview 里的下拉框中 既可以从下拉框里选择数据,也可以让客户自己手动往里输入数据,
自动匹配,可输入可选择的下拉框 可手写,可选择 方便实用。
网页中的下拉框可以输入选择
该下拉框 可输入文字、可下拉选择选项、外观与下拉框一致
类似百度搜索框,可以输入的下拉框,输入信息后能自动匹配数据库里的数据,如果数据库里有马上都能显示出啦,用下拉选择马上可以选择。带数据库功能。本代码通过网友的代码改编整合。
可输入的下拉框 可以用来做模糊查询 可输入的下拉框 可以用来做模糊查询
一个很简单的可手写输入的下拉框,可以选择和手写输入。
此程序是c# winform 开发的下拉框选择功能,可以通过输入各选项汉字的首字母快速检索所需项,当然,里面其中最大的功能是汉字转拼音功能(汉字全拼/汉字首字母等功能)。由于刚好一个老系统在用vs2003,所以,索性就...
本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1、原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 ...
既可以输入,又可以下拉的输入框,类似GoogleSuggest功能
这是一个自定义的可编辑下拉框 可输入可选择 内附使用文档 非常的简单 代码也是反复测试过的
下拉框模糊查询; 可以输入可以直接选择,自动匹配; 非常简单,快捷
下拉框读取数据库数据.有时候数据多.会拉的很长.客户搜索起来很不方便.现在可以编辑下拉框,可根据输入的内容重新加载下拉框的内容.令客户选择查找起来更方便. 使用方法....随便输入一个字母.即可看到效果.
Autocomplete输入自动查找功能 结果列表分页展示 允许使用静态json数据源或ajax动态请求的数据源 使用键盘快速操作基本功能及分页功能 多项选择以标签(Tag)形式展现 结果列表自动判断屏幕边缘,避免内容超出可视...
基于.net和Jquery.autocomplete插件 做的智能匹配下拉框,可选择可输入,采用json数据格式,支持汉字、拼音和拼音首字母进行智能匹配。 使用说明: 1、如果想不做任何修改直接看效果,请在本地创建一张名为tb_Manage...