Autocomplete Combobox
From Interaction-Patterns.org
Contents |
[edit] Autocomplete Combobox
also known as Combobox including a Filter
[edit] Quick Summary
The Autocomplete Combox is basically a regular Combobox with the additional functionality of autocompleting the input the user is entering when choosing from a set of data in a form. As you type the system suggest your words you might be looking for.
[edit] Visual Examples
| Found at www.kayak.com. Used to search for flight destinations. | Found at www.extjs.com |
[edit] Examples found on the World Wide Web
[edit] Possible Field of Application
- A direct remove and appear in another place on the page would be a jarring or confusing way to show what just happened.
- To show how an object has changed places or containment on a page.
[edit] Possible Solution
- Suggest words or phrases which are likely to complete what the user's typing. The user can then select the suggestion and avoid typing it in full. Often, the results come from an XMLHttpRequest Call - the partial input is uploaded and the server responds with a collection of likely matches.
- Suggestion has its roots in "combo boxes" - fields on traditional GUI forms that combine a text input with a dropdown list. The elements are kept synchronised. The user is free to type any text, and the current selection in the list will track what's been typed so far. The user is also free to choose an element from the list, which will then be posted back to the text field. In some cases, the list constrains what the user types; in other cases, it's there to provide suggestions only.
- It's the latter style which has become popular in recent years - free text entry, with some suggestions for completion at any time. Auto-completion became popular with Internet Explorer 5, which auto-completed fields based on user history. Most users will be comfortable with the approach, as all the modern browsers offer a similar feature, and the technique is also popular in mobile phone text messaging and East Asian (CJKV) text entry.
- In an Ajaxian context, Google set the standard with its introduction of Google Suggest, which suggests the most popular terms that will complete the user's search query. Its release surprised many, as Google had managed to completely replicate conventional combo box behaviour. Only this time, the terms were dynamically retrieved from the server instead of being present when the form's created.
The mechanics of a Suggestion usually work like this:
- A standard input field is used. At the same time, an initially-invisible div element is created to contain the suggestions as they appear. The input field needs an event handler to monitor the text it contains, so as to ensure the list always highlights whichever suggestion is matching.
- Instead of requesting a suggestion upon each keypress, Submission Throttling is usually adopted. Thus, every 100 milliseconds or so, the browser checks if anything changed since the last request. If so, the server is passed the partial query as an GET-based XMLHttpRequest Call.
- The server then uses some algorithm to produce an ordered list of suggestions.
- Back in the browser, the callback function picks up the suggestions and does some Display Morphing to show them to the user, in a format that allows them to be selected. Each entry will have an event handler, so that if clicked, the input field will be altered.
A combo-box is not the only way to render results, but it has the dual virtues of efficiency and familiarity. The Code Example below covers Kayak's implementation.
[edit] Rationale
- Mit der AJAX - Technologie wird das Handling auf Webseiten anwenderfreundlicher.
Der nützliche Effekt, möglichst nur sich ändernde dynamische Inhalte zu übertragen, wird auch ergänzt durch die Anwendung sogenannter Autocomplete Items :
- After some discussion with bill on IRC about this, I thought we should start a forum topic to discuss what is meant by "Combobox-like" behavior. This is the first stab at it...debate is welcome. Much of these just came from looking at the behavior of the URL bars of Firefox and Safari...(which is a great example, in my opinion of "Combobox-like" behavior)
First, some background: There are quite a few times when widgets need to behave as a text box with a dropdown of sorts (a Combobox). The Combobox and FilteringSelect are examples - but this would also extend to things like DateTextBox and TimeTextBox (and possibly others). There are a few commonalities between all of these items (or, in the case of Date and Time TextBoxes, there *should* be these commonalities, and bugs exists requesting these abilities in those widgets) - these are up for debate:
- They all have a textbox that allows the user to enter data manually
- They all have a "helper" dropdown that allows them to pick from pre-defined values (using keyboard or mouse)
- They support some sort of "filtering" based on what is typed in.
- They can provide some sort of "autocompletion"
And some behavior - these are also up for debate:
- They should allow for navigation of the dropdown without losing focus of the text box - that way, you can type values at any time without needing to switch focus
- When the dropdown items are hovered via mouse navigation, they should be "highlighted", but the contents of the textbox should not change
- When the dropdown items are clicked via mouse navigation, they should be "selected", and the contents of the textbox should change, the dropdown is closed, and focus remains on the text box.
- When the dropdown items are focused via keyboard navigation, they should be "highlighted", and the contents of the textbox should change to be the value of the focused item with some portion of it (or all of it) "selected" - that is text-selection in the textbox.
- When the dropdown items are clicked via mouse navigation (enter or space), the item should be "selected", and the contents of the textbox should change with no selection, the dropdown closed, and focus remains on the text box.
- If the textbox loses focus (via a tab), the dropdown is closed, and any possible text-selection in the textbox (via an autocomplete) should be deselected (in effect, "accepting" the autocompletion) and focus passes to the next item in the tab order.
- If the dropdown is opened, the escape key closes the dropdown (but doesn't remove any autocompletion, or undo any text selection in the text box).
- If the dropdown is closed, the escape key reverts the value of the textbox back to its original value ("undo").
[edit] Some principles
- The more rapid the change the more important the event.
- Rapid movement is seen as more important than rapid color change.
- Movement toward the user is seen as more important than movement away from the user.
- Very slow change can be processed without disrupting the user's attention.
- Movement can be used to communicate where an object's new home is. By seeing the object moving from one place to another we understand where it went and therefore will be able to locate the object in the future.
- Transitions should normally be reflexive. If an object moved and collapsed to a new spot, you should be able to open it and see it open up with the reverse transition. If you delete an object and it fades, then if you create an object it should fade into place. This creates a concept of symmetry of action.
