网页中下拉列表的选项是固定的，这样就存在一些弊端，如果用户想要选择的项目不在下拉菜单的选项中，该怎么办？如果能在下拉菜单中输入文字，这个问题就解决了。以下实例中，菜单选项中只包括了“新进成员”、“游侠”、“版主”3个选项，如果要添加的用户是上面三个选项以外的等级，就可以在下拉菜单中直接输入等级名称。程序运行结果如图：
 
 
 
 
由于下拉菜单的选项是固定的，所以要实现在下拉菜单中输入文字，首先要捕获用户的键盘事件，然后根据键盘输入的数据动态添加下拉菜单的选项，同时还需要判断用户按下的是退格键还是空格键，如果是退格键，则需要从已经添加的文字中删除一个文字，如果是空格键，则需要在已经添加的文字后添加一个空格字符。
 
 
本实例主要应用javascript来设置元素的innerText属性、应用String对象的fromCharCode（）方法以及select元素对象option数组的remove（）方法。下面分别介绍下。
 
 
 innerText属性：用于修改其实标记与结束标记之间的文本。
 
 
 fromCharCode方法：返回指定数值对应的字符，即将数值转换为字符。
 
 
 remove方法：删除option数组中的对应选项。
 
 
（1）在页面中添加“等级名称”下拉菜单，其中包括“新进成员”、“游侠”、“斑竹”3个选项，代码如下：
 
 
 
  
<form name="form1">
  <select name="sel_grand" id="sel_grand" onkeypress="add_opt(3)" onkeyup="edit_opt(3)">
        <option selected>新进成员</option>
        <option>游侠</option>
        <option>斑竹</option>
      </select>
</form>
 
 
 
 
（2）在select标记的onkeypress事件中调用自定义函数add_opt(opt),用于在下拉菜单中添加新的选项，并设置该选项为选中状态，代码如下： 
 
 
 
  
function add_opt(opt){
//opt表示现有可选项的数目
    form1.sel_grand.options[opt]=new Option(ok=(form1.sel_grand.options[opt])?
    form1.sel_grand.options[opt].innerText+String.fromCharCode(event.keyCode):
    String.fromCharCode(event.keyCode),ok)
    form1.sel_grand.selectedIndex=opt;
}
 
 
 
 
（3）在select标记的onkeyup事件中调用自定义函数edit_opt(opt)，用于处理当用户按下退格键是，将已经写到下拉菜单中的文字删除，当用户按下空格键时，在下拉菜单中添加一个空格字符，代码如下：
 
 
 
  
function edit_opt(opt){
//opt表示现有可选项的数目
    if(form1.sel_grand.options[opt]){
        if(event.keyCode==8){
            var str=form1.sel_grand.options[opt].innerText;
            var len=str.length;
            form1.sel_grand.options[opt].innerText=str.substring(0,len-1);
            if(form1.sel_grand.options[opt].innerText==""){
                form1.sel_grand.remove(opt);
                form1.sel_grand.selectedIndex=1;
            };
        }
        if(event.keyCode==32){
            form1.sel_grand.options[opt].innerText+=" ";
        }
    }
}
</script>
 
 
 
 
 
 
转载于:https://www.cnblogs.com/rabbit2012/archive/2012/12/04/2801756.html

可以输入也可以下拉选择的select
 我们知道，一般select下拉框是只能选择的，不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时，我们可以让select变成text，允许用户输入想要的内容，同时还可以在输入的时候将包含关键字的项也列出来，供快速选择。
 
查看演示 下载源码
 本文将用实例和大家分享一款基于jQuery的下拉框插件，它允许用户输入内容，同时下拉选项中会及时匹配相关选项，支持键盘操作，还支持html选项内容，当然还能让下拉的过程带有动画效果。我们来看下如何使用。
 
HTML结构
 下面是一个基本的select下拉框。
 Alfa Romeo Audi 中国人民银行 中国人民 中国 BMW 此外还需要加载jQuery库和jquery.editable-select.js文件，在源码下载包里已经有了。 
jQuery
 只需要以下代码就能实现传统的下拉框变成有输入功能的下拉框了。
 
$(’#editable-select’).editableSelect({
 effects: ‘slide’
 });
 其实我们细看插件代码就会发现，作者是将原有的select处理了下，变成了一个输入表单text和一个列表ul。这样text可以输入，下拉选项则用ul面板，这样一来ul里的选项就可以添加任意html代码了，demo中有示例。然后通过使用CSS以及js技术可以实现下拉弹出、输入查找匹配功能。
 
选项设置
 filter：过滤，即当输入内容时下拉选项会匹配输入的字符，支持中文，true/false，默认true。
 
effects：动画效果，当触发弹出下拉选择框时的下拉框展示过渡效果，有default，slide，fade三个值，默认是default。
 
duration：下拉选项框展示的过渡动画速度，有fast，slow，以及数字（毫秒），默认是fast。
 
事件
 onCreate：当输入时触发。
 
onShow：当下拉时触发。
 
onHide：当下拉框隐藏时触发。
 
onSelect：当下拉框中的选项被选中时触发。
 
事件调用方法：
 
$(’#editable-select’).editableSelect({
 onSelect: function (element) {
 alert(“Selected!”);
 }
 });
 此外，还支持键盘方向键、回车键、Tab键以及Esc键操作。
 
jQuery Editable Select项目官网地址：https://github.com/indrimuska/jquery-editable-select
 
原文链接：http://www.helloweba.com/view-blog-348.html
 好文要顶 关注我 收藏该文

注意：input中的list要与datalist的id一样
 
<input type="text" id="interval" name="interval" list="feng_kong_cuo_shi_1"datatype="*"  style="width:170px;">
							<datalist id="feng_kong_cuo_shi_1" >
									<option value="hour" id="hour">小时</option>
									<option value="second" id="second">秒</option>
									<option value="minute" id="minute">分</option>
									<option value="day" id="day">天</option>
							</datalist>
 
效果：
 

 

jQuery搜索框输入文字下拉提示菜单



原文地址：





http://www.jq22.com/jquery-info6193



http://www.jq22.com/jquery-info11787