Question

我正在建设新网站，我需要一个下拉菜单来选择我网站中的内容。但与此同时，我需要这个下拉列表来接受文本。因此，如果客户想要从下拉列表中选择，那么他也可以，如果客户想要通过文本输入金额，那么他也可以。正如你所看到的，我想把它变成双重的。

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

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

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

是否有HTML代码可以将下拉菜单和文本字段合二为一，而不是分开？

Answer 1

您可以使用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>

Answer 2

选项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>

Answer 3

我发现这个问题和讨论非常有用，并希望展示我最终得到的解决方案。它基于@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;
}

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

Answer 4

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

https://developer.mozilla.org/en-US/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à。非常好而且容易。

Answer 5

我喜欢jQuery Token输入。实际上更喜欢UI而不是上面提到的其他一些选项。

http://loopj.com/jquery-tokeninput/

另请参阅：http://railscasts.com/episodes/258-token-fields获取解释

Answer 6

受到@ajdeguzman的js小提琴的启发（我的一天），这是我的节点/ React派生词：

// Do runtime reflection on classes loaded by current ClassLoader
val currentMirror: universe.Mirror = scala.reflect.runtime.currentMirror

// Use symbols to navigate to pick out the methods and fields we want to invoke
// Notice explicit symbol casting with the `.as*` methods.
val classSymbol: universe.ClassSymbol = currentMirror.staticClass("com.example.Foo")
val constructorSymbol: universe.MethodSymbol = classSymbol.primaryConstructor.asMethod
val fooSymbol: Option[universe.TermSymbol] = classSymbol.toType.members.find(_.name.toString == "foo").map(_.asTerm)

// Get mirrors for performing constructor and field invocations
val classMirror: universe.ClassMirror = currentMirror.reflectClass(classSymbol)
val fooInstance: Foo = classMirror.reflectConstructor(constructorSymbol).apply().asInstanceOf[Foo]
val instanceMirror: universe.InstanceMirror = currentMirror.reflect(fooInstance)

// Do the actual invocation
val fooValue: String = instanceMirror.reflectField(fooSymbol.get).get.asInstanceOf[String]
println(fooValue) // Prints the value of the val "foo" of the object "fooInstance"

看起来像这样：

Answer 7

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

第1步：将列表固定为固定高度并且可滚动

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

第2步：打开重点列表：

Display jquery ui auto-complete list on focus event

第3步：将最小字符数设置为0，这样无论输入中有多少个字符都将打开

最终结果：

FOR /F %%i in (%cd%) DO (IF %%i =="w" counter+=1)

在此处检查jsfiddle：

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

Answer 8

您可以使用<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>

下拉菜单/文本字段为一

8 个答案:

选项1

选项2