下拉菜单/文本字段合而为一

72

我正在构建新网站，因此需要一个下拉菜单来选择网站中的内容数量。但是同时我需要此下拉列表来接受文本。因此，如果客户希望从下拉列表中进行选择，那么他可以，如果客户希望通过文本输入金额，那么他也可以。如您所见，我想使其双重。

例如：假设有一个amount下拉菜单，其元素为（1,2,3）;

现在假设客户需要将金额设置为5-这是他的权利-下拉列表中不存在该金额，因此客户现在必须以文本形式输入金额。因此，对于任何条目，客户都必须从下拉列表中选择或以文本形式输入金额。

在描述了我的问题以及我向您介绍的简单示例之后，这是我的问题：

是否有HTML代码可将下拉菜单和一个文本字段合并为一个，但不是分开的？

html  html-select  html-input 
— 哈立德·贾拉
source
1
— KyleMit 17-4-4
— Tot Zam

Answers:

44

选项1

包括来自dhtmlgoodies的脚本并像这样初始化：

<input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico"> 

createEditableSelect(document.forms[0].myText);

选项2

这是一个自定义解决方案，它结合了一个<select>元素和一个<input>元素，设置它们的样式并通过JavaScript来回切换

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>
— 德文·拉索德（Devang Rathod）
source
2
固定高度和颜色会给您： jsfiddle.net/aljohnix/78mdmrs7
— ajdeguzman 2015年
谢谢，我使用了此解决方案，并建议进行其他一些调整。首先，在更改输入框时，将选择值重置为空字符串选项。否则，如果您选择一个选项然后对其进行编辑，则无法重置为该选项，因为即使该值不再匹配，该下拉菜单中的选项也已被选中。其次，这只是使它与页面上突出显示当前输入的其他样式看起来不错的问题，将选择集中到输入的焦点放在焦点上。下拉菜单仍然有效，但突出显示的焦点看起来正确。
— Daniel Skarbek
136

您可以使用HTML5本机执行此操作<datalist>：

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
展开摘要

— onaclov2000
source
7
它们的行为似乎在不同的浏览器中有所不同。在Firefox（40.0.3）中，我看到建议'label1'和'label2'，而在Chrome（45.0.2454.85 m）中，我看到建议'value1'和'value2'。它们还以不同的方式工作，例如对焦点/鼠标悬停的响应，Chrome通过值显示标签。
— mwfearnley
1
如果我删除了label =属性，则Firefox将建议这些值，例如Chrome。（Chrome永远不会建议标签-如果我删除'value ='属性，Chrome不会显示任何内容。）
— mwfearnley 2015年
5
IE11显示标签（如果同时存在），反示语（如果仅存在标签）不显示任何内容以及值（如果存在值）。因此，在IE，Firefox和Chrome浏览器中，唯一一致的行为是，如果仅包含不带标签的值，则将获得值列表。
— mwfearnley
1
我想知道某些兼容性问题是否与该示例中的选项标签有关，而不是不使用结束标记或斜杠？例如：<option label='label1' value='value1' />只是一个想法。
— TARKUS
我所看到的与HTML5实体有关的另一个问题是，可接受的答案可以解决该问题（至少在我测试过的Chrome中），值的下拉列表仅过滤与键入的文本匹配的那些选项。至少对于我的应用程序，即使输入了一些文本，我仍然希望能够看到选项的完整列表。我使用的是HTML5实体，但是要解决此问题，我将切换javascript解决方案。
— Daniel Skarbek
5

我发现这个问题和讨论非常有帮助，并希望展示最终得到的解决方案。它基于@DevangRathod给出的答案，但是我使用了jQuery并对其进行了一些调整，因此希望显示一个具有完整注释的示例，以帮助其他人进行类似的工作。我最初使用的是HTML5数据列表元素，但对该解决方案不满意，因为它从下拉列表中删除了与框中输入的文本不匹配的选项。在我的应用程序中，我希望完整的列表始终可用。

此处具有完整功能的演示：https : //jsfiddle.net/abru77mm/

HTML：

<!-- 
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style.  Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
  <select class="data-list-input" style="width:190px;">
    <option value="">&lt;Free Form Text&gt;</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <!-- Note that though the select/option allows for a different
    display and internal value, there is no such distinction in the
    text box, so for all the options (except the "none" option) the
    value and content of the option should be identical. -->
  </select>
  <input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>

JS：

jQuery(function() {
  //keep the focus on the input box so that the highlighting
  //I'm using doesn't give away the hidden select box to the user
  $('select.data-list-input').focus(function() {
    $(this).siblings('input.data-list-input').focus();
  });
  //when selecting from the select box, put the value in the input box
  $('select.data-list-input').change(function() {
    $(this).siblings('input.data-list-input').val($(this).val());
  });
  //When editing the input box, reset the select box setting to "free
  //form input". This is important to do so that you can reselect the
  //option you had selected if you want to.
  $('input.data-list-input').change(function() {
    $(this).siblings('select.data-list-input').val('');
  });
});

CSS：

div.data-list-input
{
    position: relative;
    height: 20px;
    display: inline-flex;
    padding: 5px 0 5px 0;
}
select.data-list-input
{
    position: absolute;
    top: 5px;
    left: 0px;
    height: 20px;
}
input.data-list-input
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
}

欢迎对我的实施提出任何改进意见。希望有人觉得这有帮助。

— 丹尼尔·斯卡贝克
source
如何限制用户输入？当用户单击文本框时，显示下拉值
— GANI
@GANI这并不是这种方法的重点。如果您不希望用户键入内容，则仅使用标准的下拉列表即可。解决方案的重点是专门用于您希望允许用户键入自己的值的情况。
— 丹尼尔·斯卡贝克
2

现代的解决方案是“搜索”类型的输入字段！

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/search https://www.w3schools.com/tags/tag_datalist.asp

在HTML的某处定义了一个数据列表，以供以后参考：

<datalist id="mylist">
   <option value="Option 1">
   <option value="Option 2">
   <option value="Option 3">
</datalist>

然后，您可以定义搜索输入，如下所示：

<input type="search" list="mylist">

Voilà。非常好和容易。

— 卑鄙
source
好的答案，但是输入字段的类型不是很重要。
— akauppi '20年
@akauppi是的，因为它的类型为“搜索”，所以您可以同时执行两种操作-从列表中选择一个值或键入一个值，它将在列表中搜索。
— cslotty
“这些功能与文本输入相同，但是用户代理可以设置不同的样式。” -从您的第一个链接开始。
— akauppi '20
@akauppi我不确定“在功能上与文本输入相同”的含义。文本输入通常不会添加数据列表。
— cslotty
1

受到@ajdeguzman的js小提琴的启发（我今天很高兴），这是我的node / React派生类：

 <div style={{position:"relative",width:"200px",height:"25px",border:0,
              padding:0,margin:0}}>
    <select style={{position:"absolute",top:"0px",left:"0px",
                    width:"200px",height:"25px",lineHeight:"20px",
                    margin:0,padding:0}} onChange={this.onMenuSelect}>
            <option></option>
            <option value="starttime">Filter by Start Time</option>
            <option value="user"     >Filter by User</option>
            <option value="buildid"  >Filter by Build Id</option>
            <option value="invoker"  >Filter by Invoker</option>
    </select>
    <input name="displayValue" id="displayValue" 
           style={{position:"absolute",top:"2px",left:"3px",width:"180px",
                   height:"21px",border:"1px solid #A9A9A9"}}
           onfocus={this.select} type="text" onChange={this.onIdFilterChange}
           onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp} 
           placeholder="Filter by Build ID"/>
 </div>

看起来像这样：

在此处输入图片说明

— Gunnar Forsgren-移动化
source
0

我想添加一个基于jQuery自动完成功能的解决方案来完成这项工作。

第1步：使列表固定高度并滚动

从https://jqueryui.com/autocomplete/获取代码 “可滚动”示例，将最大高度设置为结果列表，使其表现为选择框。

步骤2：打开重点列表：

在焦点事件上显示jQuery UI自动完成列表

步骤3：将最小字符数设置为0，以便无论输入中有多少个字符都将其打开

最后结果：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Scrollable results</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
//      source: availableTags, // uncomment this and comment the following to have normal autocomplete behavior
      source: function (request, response) {
          response( availableTags);
      },
      minLength: 0
    }).focus(function(){
//        $(this).data("uiAutocomplete").search($(this).val()); // uncomment this and comment the following to have autocomplete behavior when opening
        $(this).data("uiAutocomplete").search('');
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

在这里检查jsfiddle：

https://jsfiddle.net/bao7fhm3/1/

— 亚历山德鲁·特兰达菲·卡塔琳
source
0

您可以使用<datalist>标签代替<select>标签。

<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
— 克里沙
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.