下拉框输入文本

最新推荐文章于 2021-12-08 16:52:29 发布
最新推荐文章于 2021-12-08 16:52:29 发布
阅读量688 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuaicike/article/details/8649396
版权 
<html>
    <head>
            <script src="jquery-1.4.4.min.js" type="text/javascript" ></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var cus = 0;
                var classname = "";
                var arry = new Array();
                var $autocomplete = $("<ul class='autocomplete'></ul>").hide().insertAfter("#box4");
                $("#hoho").find("option").each(function (i, n) {
                    arry[i] = $(this).text()
                });
                $("#box4").keyup(function (event) {
                    if ((event.keyCode != 38) && (event.keyCode != 40) && (event.keyCode != 13)) {
                        $autocomplete.empty();
                        var $SerTxt = $("#box4").val().toLowerCase();
                        if ($SerTxt != "" && $SerTxt != null) {
                            for (var k = 0; k < arry.length; k++) {
                                if (arry[k].toLowerCase().indexOf($SerTxt) >= 0) {
                                    $("<li title=" + arry[k] + " class=" + classname + "></li>").text(arry[k]).appendTo($autocomplete).mouseover(function () {
                                        $(".autocomplete li").removeClass("hovers");
                                        $(this).css({
                                            background: "#3368c4",
                                            color: "#fff"
                                        })
                                    }).mouseout(function () {
                                        $(this).css({
                                            background: "#fff",
                                            color: "#000"
                                        })
                                    }).click(function () {
                                        $("#box4").val($(this).text());
                                        $autocomplete.hide()
                                    })
                                }
                            }
                        }
                        $autocomplete.show()
                    }
                    var listsize = $(".autocomplete li").size();
                    $(".autocomplete li").eq(0).addClass("hovers");
                    if (event.keyCode == 38) {
                        if (cus < 1) {
                            cus = listsize - 1;
                            $(".autocomplete li").removeClass();
                            $(".autocomplete li").eq(cus).addClass("hovers");
                            var text = $(".autocomplete li").eq(cus).text();
                            $("#box4").val(text)
                        } else {
                            cus--;
                            $(".autocomplete li").removeClass();
                            $(".autocomplete li").eq(cus).addClass("hovers");
                            var text = $(".autocomplete li").eq(cus).text();
                            $("#box4").val(text)
                        }
                    }
                    if (event.keyCode == 40) {
                        if (cus < (listsize - 1)) {
                            cus++;
                            $(".autocomplete li").removeClass();
                            $(".autocomplete li").eq(cus).addClass("hovers");
                            var text = $(".autocomplete li").eq(cus).text();
                            $("#box4").val(text)
                        } else {
                            cus = 0;
                            $(".autocomplete li").removeClass();
                            $(".autocomplete li").eq(cus).addClass("hovers");
                            var text = $(".autocomplete li").eq(cus).text();
                            $("#box4").val(text)
                        }
                    }
                    if (event.keyCode == 13) {
                        $(".autocomplete li").removeClass();
                        $("#HTML").html("你选择的是<font color='red'>" + $(".autocomplete li").eq(cus).text() + "</font>");
                        $autocomplete.hide();

                    }
                }).blur(function () {
                    setTimeout(function () {
                        $autocomplete.hide()
                    },
                    3000)
                })
            });
            function setValue(index) {
                var ddl = document.getElementById("hoho");
                var Value = ddl.options[index].text;
                document.getElementById("box4").value = Value
             //   $("#HTML").html("你选择的是<font color='red'>" + Value + "</font>");
            }

        </script>
        <style type="text/css">
                .hoho{width:197px;height:20px!important; height:17px;margin-left:-180px!important}
            .hoho1{width:203px;height:24px!important; height:17px;margin-left:-180px!important;margin-top:1px}
.sp{margin-left:179px;width:18px;overflow:hidden; }
.bo4{width:178px;position:absolute;left:0px!important;height:20px!important;top:0.5px!important; left:1px; top:0px; height:20px}
.autocomplete{list-style-type:none; margin:0px; padding:0px; border:#008080 1px solid }
.autocomplete li{font-size:12px; font-family:"Lucida Console", Monaco, monospace; font-weight:bold; cursor:pointer; height:20px; line-height:20px}
.hovers{ background-color:#3368c4; color:fff}

        </style>
    </head>
    <body>
        <table width="440" border="0" align="center">
  <tr>
    <td>
        <div style="position:relative;">  
      <span  class="sp">  
                     <![if !IE]>
    <select id="hoho" name="hoho"  class="hoho" onChange="setValue(this.selectedIndex)" width="197px">
            
<![endif]>
                          <!--[if IE]>
    <select id="hoho" name="hoho"  class="hoho1" onChange="setValue(this.selectedIndex)" width="197px">
            
<![endif]-->
              <option> ===请选择===</option>
                  <option value='0' >Java EE</option>
                  <option value='1' >Java SE</option>
                  <option value='2' >Java ME</option>
                  <option value='3' >Net</option>
                  <option value='4' >PHP</option>
                  <option value='5' >Ajax</option>
                  <option value='6' >JQuer</option>
             </select>
              
     </span>
     <input name="box4" id="box4" value="===请选择==="  class="bo4" >  
</div>
    </td>
    
  </tr>
</table>
    </body>
</html>

shuaicike2013
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
下拉框和文本框组合共用-可以输入的下拉框ok
06-22
下拉框和文本框组合共用-可以输入的下拉框ok
实现下拉文本框的输入提示功能
12-13 5581
winform中已经实现了类似的功能 List listInit = new List(); private void Form1_Load(object sender, EventArgs e) { listInit.Add("A1"); listInit.Add("A2"); list
搜索插件AutoComplete（如何调用jQuery插件学习第四天）
weixin_42306620的博客
08-16 699
       AutoComplete为自动填充，展示之意。jQuery中引入该插件后，用户在使用文本框搜索信息时，使用插件autoComplete方法绑定文本框，当在文本框中输入某个字符时，通过该方法中的指定的数据URL，返回相匹配的数据，自动显示在文本框下，提醒用户进行选择。 AutoComplete插件的使用： （1）插件文件： Js-8-4/jquery.autocomplete.j...
jquery实现下拉框可自定义输入文本的功能
qq_36291221的博客
09-19 1万+
一般来说，Select下拉框只能选择，不能用来输入内容。当下拉框没有要选择的信息项时，则需要手动输入。实现思路：通过select与text文本框的结合，具体则是通过将text文本框覆盖到select下拉框上，只露出三角形部分，再通过onchange()点击函数，给文本框赋值。示例如图片所示，具体代码如下所示，可参考！ m3/s
获取下拉框的文本值
weixin_44569835的博客
04-08 1万+
获取下拉框的文本值 这次分享的是获取下拉框的文本值，这里写了两种获取下拉框文本值的方法，一种是写实的，一种是用数据库数据绑定上去的，用数据库数据绑定的两个都可以用，不过为了不重复就使用另一种方法。 首先准备一个写实的下拉框和一个数据库数据绑定的下拉框，还有两个文本框，用来显示两个下拉框文本值的。HTML代码如下： <div> <p>写实</p> ...
php获取下拉框文本,从PHP下拉列表中获取所选文本
weixin_31421625的博客
04-14 362
我是PHP的新手,事实上我这样做的原因是自定义一个wordpress插件,以便它可以满足我的需要.到目前为止,我有一个默认表单,我现在正在做的是添加一个国家/地区下拉列表.这是我添加它的方式Country :MalaysiaIndonesia到目前为止,我只能检索所选项目的值$cscf['country'];在这种情况下,如何获取国家/地区名称的显示文本？解决方法:您可以使用隐藏字段,使用Java...
input+select(multiple) 实现下拉框输入值
12-08
首先，`input`元素通常被用来创建一个文本输入框，让用户自由输入信息。而`select`元素则用于创建一个下拉列表，用户可以从其中选择一个或多个选项。在`select`元素中添加`multiple`属性可以让用户同时选择多个选项...
ASP .NET 可编辑输入自动匹配的下拉框
10-20
***可编辑输入自动匹配的下拉框是Web开发中的一个重要功能，它允许用户通过输入关键词来快速筛选和选择选项。在***开发环境下，可以利用第三方控件实现这种复杂的下拉选择功能。本文主要介绍了如何在***中创建一个可...
Dojo获取下拉框的文本和值实例代码
09-02
在本文中，我们将深入探讨如何使用Dojo框架来获取下拉框（选择列表）的文本和值。...这个实例展示了Dojo如何有效地帮助开发者获取下拉框的选择，这对于任何需要处理用户输入的Web应用都是至关重要的。
【ASP.NET编程知识】ASP .NET 可编辑输入自动匹配的下拉框.docx
05-15
* AllowCustomText：是否允许用户输入自定义的文本 * AutoPostBack：是否在选中项改变时自动提交表单 * EmptyMessage：当下拉框为空时显示的提示信息 * OnSelectedIndexChanged：选中项改变时的事件处理程序 * ...
带下拉框的input文本（两种实现方式）
祁_z
04-19 1万+
第一种 为了样式好看一些我是搭配的bootstarp使用的，如何不使用bootstarp去掉class="form-control" 和class="form-group col-lg-3"属性 <div class="form-group col-lg-3"> <input type="text" id="input" style="position:absol...
下拉框增加可输入文本
weixin_30251829的博客
08-17 314
原理： 　　将下拉框用一个input盖住，再将select的值改入input内。 代码： <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; ch...
关于Input输入框添加下拉框（可输入、可选）
weixin_45078922的博客
12-08 1万+
昨天，UI突然发过来一个设计图，可输入文本框加上可选择的下拉框，原本以为很简单的事情却在我翻看组件库的一次次崩溃中变得复杂。 iview组件库中的Select框确实很像啊，但是，不能输入啊！！！！！！崩溃中。。。。 突发奇想，组件都是原生代码编写的，为啥我不能基于vue2编写一个自己的组件呢，由于代码篇幅较大，所以我选择在components中创建新的vue文件（优点：够清晰；缺点：涉及父子组件的传值问题） 既然要自己写组件，那么首先就是样式问题，一个大的div中嵌套一个Input标...
可输入可选择的下拉框（input select）并且输入框获得下拉的内容
热门推荐
汪缓的博客
12-01 3万+
1、JSP代码                   请选择.... 11 22 33 2、JS方法 function setRuleContent(){        var selectValue = $('#_select option:selected').text();//选中select的内容        //alert("select
JS跟随页面移动的div
shuaicike的专栏
01-16 3815
/* divID = 元素id fistTop = 元素起始位置 */ function scrollDiv(divID, fistTop) { this.fistTop = fistTop; this.onscroll(divID); }
JS改写ALERT
shuaicike的专栏
03-05 3363
以前实例是根据COOKIES的语言来alert相关提示： var GloLangXML = "";//全局语言包 var alert1 = window.alert;//重写ALERT，用于COOKIE读取多语言，自动弹出对应语言的提示 window.alert = showAlert; function showAlert(Str) { if (getCookie("lang") ==
JS触发ctrl+enter的事件
shuaicike的专栏
04-15 2404
document.onkeydown = function (e) { e = e ? e : window.event; var keyCode = e.which ? e.which : e.keyCode; if (e.ctrlKey &&keyCode == 13) { submitFo
uniapp可输入下拉框
最新发布
05-30
Uni-app 中可以使用原生的 select 组件实现下拉框功能。你可以通过 select 组件的 options 属性设置下拉框选项，用户可以通过点击下拉框展开选项列表并选择其中一项。以下是一个示例代码： ```html <template> <view> <select v-model="selected" :options="options"></select> </view> </template> <script> export default { data() { return { selected: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, ] } } } </script> ``` 在上面的代码中，我们使用了 select 组件，并通过 options 属性设置了下拉框的选项。用户选择的选项会被绑定到 selected 变量上。你也可以通过设置 select 组件的 placeholder 属性来设置下拉框的占位符文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值