精华内容
下载资源
问答
  • 输入文字下拉列表 可输入文字下拉列表 可输入文字下拉列表 可输入文字下拉列表
  • 如果能在下拉菜单中输入文字,这个问题就解决了。以下实例中,菜单选项中只包括了“新进成员”、“游侠”、“版主”3个选项,如果要添加的用户是上面三个选项以外的等级,就可以在下拉菜单中直接输入等级名称。程序...

    网页中下拉列表的选项是固定的,这样就存在一些弊端,如果用户想要选择的项目不在下拉菜单的选项中,该怎么办?如果能在下拉菜单中输入文字,这个问题就解决了。以下实例中,菜单选项中只包括了“新进成员”、“游侠”、“版主”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,允许用户输入想要的...

    可以输入也可以下拉选择的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
    好文要顶 关注我 收藏该文

    展开全文
  • 自定义 wpf 文本下拉框控件,输入字符自动模糊查询,下拉显示出来,可配置,输入多长后去服务端拿数据显示,也可配置,输入文字后几毫秒去查询
  • input既可以输入可以下拉列表选择

    千次阅读 2019-08-31 17:45:14
    注意: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...

    注意: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搜索框输入文字下拉提示菜单(bootstrap风格)autocomplete
  • jQuery搜索框提示,autocomplete输入框文字提示,搜索框提示文字,搜索框提示代码,搜索框提示功能
  • autocomplete插件实现了可编辑可输入文字模糊匹配下拉选项,适用于下拉选项比较多的情况下使用,快速搜索并定位下拉
  • jquery搜索框输入下拉文字高亮插件
  • jQuery搜索框输入下拉文字高亮代码是一款搜索框输入文字标题进行模糊搜索,输入关键字,高亮显示关键字代码
  • 匹配input框输入的内容改变下拉相同的内容
  • 匹配input框输入的内容改变下拉相同的内容
  • jQuery搜索框输入文字下拉提示菜单

    千次阅读 2018-04-13 00:12:43
    jQuery搜索框输入文字下拉提示菜单 原文地址: http://www.jq22.com/jquery-info6193 http://www.jq22.com/jquery-info11787
    jQuery搜索框输入文字下拉提示菜单
    

    原文地址:


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

    http://www.jq22.com/jquery-info11787
    展开全文
  • jQuery搜索框输入下拉文字高亮代码是一款搜索框输入文字标题进行模糊搜索,输入关键字,高亮显示关键字代码
  • 而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让select变成text,允许用户输入想要的内容,同时还可以输入的时候将包含关键字的项也列出来,供快速选择。 首先先引入插件的css
  • 下拉选框既可以展示下拉内容同时也可像输入框一样可以输入内容
  • 下拉列表如何自定义输入文字

    千次阅读 2016-10-07 17:06:47
    最近在做报表时,需要做一个下拉框,下拉框既可以选择已有的选项,最好还能自己输入新的的选项。
  • //输入关键字的输入框 public UILabel inputLabel; //存放选择选项的Label public UILabel tempLabel; string tempstr; string strLabel; bool isSelect; // Use this for initialization void Start () ...
  • 如题,我在数据库中建立了表,首字母和相应的汉字都有,如何在程序中让combox输入首字母显示出汉字呢,就像12306订票系统一样,在站台名中输入首字母出现汉字
  • 本程序是在VS2005下开发的,数据库sql2000,其中的搜索的数据字段是NAME字段,这是看到搜索火车票的程序自己写的。
  • 在本文中,我们将对以下内容进行介绍:1、 结构剖析下拉菜单的解剖结构与文本输入字段的解剖结构非常相似。2、下拉菜单类型和变体虽然标准的下拉菜单被广泛理解,但有一些不同的类型和变体,你可能需要在下一步的...
  • 在自己的网页里套上百度搜索引擎,google搜索引擎,文本框中输入文字会显示下拉提示自动补全文字,点百度一下打开百度显示你搜索的文字.zip
  • 输入下拉列表及文本框自动匹配

    热门讨论 2009-08-10 12:18:40
    输入下拉列表自动匹配及文本框输入自动匹配
  • js实现input输入框输入信息后出现下拉选择框

    千次下载 热门讨论 2010-08-17 15:39:10
    js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取
  • 我想实现这样的功能:当我在下拉列表框中输入几个文字时,和这几个文字最匹配的项自动显示列出以供用户选择。就像用金山词霸查单词时一样。望知情者速跟贴,不甚感激。 在TextChanged事件中加入代码: private void ...
  • 今天在jsp页面中作了一个下拉列表,写了好了里面的元素以为就这样就可以了,一个意外的操作,让我发现竟然不点击下拉别表的三角号,可以在里面输入文本,这个很郁闷,各种想办法, 最后一个简单的操作就可以了,在...
  • 有时候,下拉框不能满足我们的业务需求,还需要同时支持用户输入内容,默认的select标签是不支持用户输入的,下面我说一下原生的select如何支持用户输入,代码如下: <!DOCTYPE html> <html> <...
  • 电脑买回来了,但是不会英文啊,怎么输入都是English呢?今天小编给大家认识一下怎么输入汉字。...选中汉字输入法后,会出来一个状态条,可以查看输入的状态,正常的状态如下;1、全拼输入法的使用1)启动记事本 单击“...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,939
精华内容 22,775
关键字:

怎么设置输入文字可以下拉