5

In auto-complete input fields, the suggestions are usually optional, but the user can type whatever he wants.

I want to force the user to choose from the suggested list.

The best option I can think of is to choose the first option by default (while he can keep typing), and if no results are found - delete the last character (recursively).

Is that the right way to do so? Any reference to this behavior online?

Improve this question

5 Answers 5

Reset to default
1

Are you completely free to design this control? If I were designing a GUI control for this requirement, I would think about two ways of doing it.

One would be to completely reject a character which causes the input typed so far to no longer be a viable prefix for any matches. As in, make it impossible to type, but with some kind of feedback that the character is being rejected. (Something visual happens in the input field, and there is a sound; it must never look like the interface has become unresponsive.)

Another approach would be to allow the user to type arbitrary input (which is what you seem to want), but to apply syntax coloring to distinguish the valid prefix from an invalid suffix. Characters that do not complete could be colored red, or something like that, and the GUI would prevent that input from being submitted while it contains a trailing portion that is flagged as an invalid suffix.

The user can realize his or her mistake and backspace over the flagged characters.

At all times, the possible choices should be shown (unless there are too many, in which case you want to condense the list in some sensible way) and it should be possible for the user to just shortcut to one of the choices.

Improve this answer
2
  • Why do you want to force the user to type something correct? Imagine a user wants to copy another user name, then edit part of it (e.g. because both users work for a company with an un-spellable name, I dunno "diminutive_software_john"). Why not let them paste that in, then edit it until it's correct again? You usually have to validate the user name upon submission anyway for a web form for security reasons, so just let them type something wrong and it'll sort itself out later. But feel free to e.g. show a match in bold in the suggestion popup.
    – uliwitness
    Apr 3, 2017 at 13:32
  • @uliwitness I think you have a new answer here, or a comment that should go under the question.
    – Kaz
    Apr 3, 2017 at 14:47
2

You can use either client or server side validation to do it. Use something similar to FilteringSelect widget of DOJO: http://dojotoolkit.org/reference-guide/1.7/dijit/form/FilteringSelect.html#dijit-form-filteringselect

At server side you can validate input and refuse "made up" values. And of course, you can combine both.

Another option is to use pure Combo (SELECT), many browsers support "typeahead" - query for value in it. But many users do not know/use it.

Improve this answer
2

A combo box (textbox / drop down) creates the expectation that users can make any choice they like. I do not recommend using this control if the user is not allowed to provide new choices. Instead I would provide a normal drop down control, which still allows users to select by typing in most user interfaces.

In particular, even if you choose to retain their ability to type arbitrarily, you should not silently ignore what they type. If they type a choice that is not available on the list they need to resolve that conflict manually rather than have the system try to pick one for them. For example, filling out a result of Ontario in a box that auto-switches it to Oregon (because the form is US only) is going to cause far more problems than it resolves.

Improve this answer
1

It sounds to me like in that case it's more of a dropdown/select combobox.

You can try a version of it HERE in the sampler for the Vaadin framework.

Improve this answer
10
  • 4
    You can make an autocomplete text box only accept input from the suggestions too if you want, though it would break people's expectations.
    – ChrisF
    Apr 23, 2012 at 13:15
  • 1
    @ChrisF you're right. and for that reason it would be good to style the input field as selection element with input prompt.
    – AndroidHustle
    Apr 23, 2012 at 13:20
  • 1
    Dropdowns/Listboxes are no good if there are thousands of records. I think the best solution here would be a textbox, which filters a listbox of results - one (or however many) of which should be selected to progress.
    – Anonymous
    Apr 23, 2012 at 15:33
  • @Anonymous- did you check the link? except for having a expand button that's pretty much exactly what you described.
    – AndroidHustle
    Apr 23, 2012 at 20:53
  • @AndroidHustle - I don't see how that forces you to pick a city rather than type a new one in?
    – Anonymous
    Apr 24, 2012 at 7:37
1

It really depends on how many answers or options you are going to give the user. If it is a field of hundreds of possible choices, a drop-down list would be cumbersome and scroll forever. If you are only talking about 10-20 or so, then a drop-down is perfectly acceptable.

If your list is large, I like letting the user begin to type and answer and pick from the list that auto populates. @AndroidHustle gave a good example with the Vaadin framework.

Here is another example of a list that populates while you type, but will only accept one of the pre-determined answers.

http://jqueryui.com/demos/autocomplete/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.