自动完成与下拉。什么时候使用？
我在某处读过（不记得/找不到在哪里）一篇关于网络可用性的文章，描述了何时使用下拉菜单以及何时使用自动完成字段。
基本上，这篇文章说，人脑无法存储超过最后五个可供选择的选项。
例如，在一份个人资料表格中，有你当前的职业，系统给你一堆选项，当你读到第六个选项时，你的大脑就记不住第一个了。此示例是使用自动完成字段的好地方，用户可以在其中输入他认为属于其职业的内容，然后从筛选出的几个选项中选择更好的选项。
我想听听您对这个主题的看法。
何时应使用下拉菜单以及何时应使用自动完成字段？
I've read somewhere (can't remember/find where) an article about web usability describing when to use drop downs and when to use autocomplete fields.
Basically, the article says that the human brain cannot store more then the last five options presented to choose.
For example, in a profile form, where there is your current occupation, and the system gives you a bunch of options, when you read the sixth options, your brain can't remember the first one anymore. This example is a great place to use an autocomplete field, where the user types something that he thinks that would be his occupation and then select the better from the few options filtered.
I would like to hear your opinion about this subject.
When should I use a drop-down and when I should use a Autocomplete field?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
对于有限的列表，不要使用自动完成编辑框或组合框，而是使用所有值同时可见的列表框。对于有限的列表，尤其是最多大约 8 个项目的静态内容，这会占用空间，但可以为用户提供更好的即时概览。
对于少于 5 个项目，单选组或复选框组（多项选择）也可能更好。
对于内容是动态的列表（例如联系人列表），（滚动）列表框或组合框是合适的，因为您永远不知道列表中有多少项。为了使其易于管理，您需要允许某种过滤和/或自动完成。
自动完成通常会遇到这样的问题：用户输入的内容需要从头开始匹配字符串。我讨厌这些，除非它们用于根据我之前在该（类型）字段中输入的内容来完成一个值。例如，现在的浏览器在填写在线表格时提供什么。
允许用户开始在组合框中键入通常会遇到同样的缺点。但不可否认的是，如果过滤是基于“like %abc%”而不是“以 abc 开头”，那么
在处理可能包含许多相似项目的列表时，我真的很喜欢 GMail 的“收件人”字段处理它的方式。您开始输入某人姓名或电子邮件地址的任何部分，GMail 将下拉一个列表，显示姓名或电子邮件地址包含您所输入字符的所有联系人到目前为止在其中任何地方输入的内容。使用向上和向下键更改下拉列表中的选择（不影响您键入的内容），然后按 Enter 将当前选定的项目添加到“收件人”字段。到目前为止，当我必须从列表中选择某些内容时，这是我迄今为止所拥有的最佳用户体验。
还没有找到任何可以做到这一点的组件，但是通过组合编辑框和列表框来“伪造”并不难，当您开始键入时，列表框会下拉，并根据迄今为止键入的内容过滤其内容。
For a limited list, don't use an autocomplete edit box or combobox, but use a listbox where all values are visible all at once. For limited lists, especially with static content of up to about 8 items, this takes up real estate, but presents the user with a better immediate overview.
For less than 5 items a radiogroup or checkbox group (multiple selections) may also be better.
For lists whose content is dynamic, like a list of contacts, a (scrolling) listbox or combobox are appropriate because you never know how many items will be in the list. To keep it manageable, you will need to allow for some kind of filtering and/or autocomplete.
Autocomplete usually suffers from the fact that what the users types needs to match a string from the beginning. I hate those except for when they are used to complete a value based on what I typed in that (type of) field before. E.g. what browsers nowadays offer when filling out online forms.
Allowing a user to start typing in a combobox usually suffers the same drawback. But admittedly it doesn't need to if the filtering is based on "like %abc%" instead of "starts with abc"
When dealing with lists that can have many similar items, I really like the way GMail's "To" field handles it. You start typing any part of someone's name or e-mail address and GMail will drop down a list presenting all the contacts whose name or e-mail address contains the characters you have typed so far anywhere within them. Using the up and down keys changes the selection in the dropped down list (without affecting what you have typed) and pressing enter adds the currently selected item to the "To" field. By far the best user experience I have had so far when having to select something from a list.
Haven't found any components yet that can do this, but it's not too hard to "fake" by combining an edit box and a listbox that drops down when you start typing and has its contents is filtered based on what has been typed so far.
我会使用 2 个标准，
1）列表有多长，如果列表包含 5 个元素，您最好使用组合框，因为它对用户来说会更容易（更好的用户体验）
2）如果列表很长，那么使用组合框有多容易用户记住他/她正在寻找的内容的前缀...如果这并不容易，那么使用自动完成是无关紧要的..
I would use 2 criteria,
1) How long is the list, if the list contains 5 elements you better use a combobox as it will be easier for the user (better UX)
2) In case the list is long, how easy for the user to remember the prefix of what he/she is looking for... if it's not easy, using autocomplete is irrelevant..
我想说这取决于列表的多样性以及对列表项的熟悉程度。
例如，如果列表包含超过 5 个汽车品牌（列出我熟悉的项目），没问题。
另一方面，如果列表中有超过 5 个姓氏，我可能需要更多时间才能做出选择。
您可能应该尝试这两种选择，并相信您的直觉，您会发现更容易使用。
I'd say it depends on the diversity in the list, and the familiarity with the list items.
If for example the list contained over 5 car brands (list items I'm familiar with), no problem.
If on the other hand the list has over 5 last names, it could take me some more time before I'd make a selection.
You should probably just try out both options and trust your gut on which you find easier to use.
这是相反的方法：
使用自动完成框的最糟糕时间是当您拥有有限且相对较小的选项集，并且用户不知道有效选项的范围时。例如，如果您销售二手车并且拥有多种品牌，则只需在组合框中列出品牌比自动完成方法更高效且更易于浏览。
能够记住最后 5 个选项很可能是无关紧要的，除非您有一个巨大的选项列表并且要求用户选择最相关的项目。
另一种方法是同时使用两者。我相信 Dojo 有一个小部件，它既充当组合框又充当自动完成字段。您可以选择开始输入，它会缩小可能的选项范围，或者您可以用鼠标与其交互并像组合框一样浏览它。
Here's the opposite approach:
The worst time to use an auto-complete box is when you have a finite and relatively small set of options, and the user doesn't know the range of valid options. For example, if you're selling used cars and you have a mixed bag of brands, simply listing the brands in a combobox is more efficient and easier to browse than an auto-complete method.
Being able to remember the last 5 options is most likely irrelevant unless you have a giant list of options and are requiring the user to select the most relevant item.
An alternative approach is to use both. I believe Dojo has a widget that acts as both a combobox and an auto-complete field. You can either choose to start typing and it will narrow down the possible options, or you can interact with it with your mouse and browse it like a combobox.
我通常会查看列表有多大。如果选项超过 15 个，那么他们是否可以开始打字似乎更容易找到。
对我来说，另一种情况是当有其他选择并且他们可以自由输入时。这基本上消除了对两个控件的需要，因为您可以将其合并为一个。
I usually look at how big the list is going to be. If there are going to be more than 15 options then it just seems easier to find if they can just start typing.
The other circumstance for me is when there is an other option and they can free type it. This essentially eliminates the need for two controls since you can combine in one.
主要区别与可用性无关，而更多地与定义可接受的输入有关。
当您有可接受输入的预定义列表（例如枚举或职业列表）时，通常会使用组合框。
当有许多已知输入但也接受自定义输入时，最好使用自动完成字段。如果用户输入“程序员”作为他们的职业，但它不是预定义的、可接受的输入之一，并且他们会收到一条消息，表明他们的输入无效，那么用户会感到沮丧。
请记住，组合框确实允许您在其中键入内容以选择第一个匹配选项。某些类型的组合框（取决于您使用的 UI 框架）甚至允许在字段顶部或侧面的自由格式文本字段进行搜索或添加到列表。
一般来说，确定用户偏好的最佳方法是测试：A/B、现场、用户等。
希望这可以帮助您解决困境！
The main difference has nothing to do with usability but more to do with what defines the acceptable inputs.
You normally use a ComboBox when you have a predefined list of acceptable inputs (e.g. an Enum or list of occupations).
An auto-complete field is best used when there are many known inputs BUT custom input is accepted as well. The user will become frustrated if they type "Programmer" in as their occupation but it wasn't one of the pre-defined, acceptable inputs, and they are given a message that their input is not valid.
Keep in mind that ComboBoxes do allow you to type in them to select the first matching option. Some types of ComboBoxes (depending on the UI framework you are using) even allow free-form text fields at the top or side of the field to search or add to the list.
Of coarse the best way to determine what YOUR user will prefer is testing: A/B, field, user, etc.
Hope this helps you solve your dilemma!