可编辑的选择框是否正确？

Question

我有一个场景，用户通过电子邮件发送基于HTML的Web应用程序中的其他用户。

对于To：字段，用户可以选择一个预定义的电子邮件列表，或者输入自己忽略预定义的选项。

从UI的角度来看，最好的方法是什么？我使用jQuery查看了可编辑的选择框，但似乎没有让你输入自己的选项。

是否有其他UI机制可以在这里工作？

Answer 1

您可以尝试使用类似jQuery autocomplete插件的内容。这将为您提供一个文本框，您只需输入电子邮件，但也可以提供一组可选择的电子邮件地址。摆弄插件上的设置，你可以做到这一点，一旦字段获得焦点，地址集就会出现（作为一个可选择的列表）。这与文本框+选择具有相似的语义，但我认为界面看起来不那么杂乱。

Answer 2

我喜欢这样做的方法是使文本输入的行为类似于下拉列表的过滤器。用户可以从列表中选择一些内容，也可以键入几个字符来过滤或继续输入并创建一个唯一的字符串。在SELECT上放置一个大小为6的大小属性，使其显示为可选列表而不是按钮。

<div>
  <input id="mySelectInput type="text" onchange="filterSelect()"/><br/>
  <select id="mySelect" size="6">
    <!-- array of options -->
  </select>
</div>

然后只需编写 filterSelect（）函数

Answer 3

你可以选择混合方法：一个可写字段，在用户写地址时提供地址建议，比如Gmail，或者我猜其他网络邮件系统。

通过这种方式，您将向用户显示他自己保存的地址，但让他有机会写一个新地址。