Develop example of editable combobox that restricts input to allowed values

[carmacleod]

In #1026 (comment) @mcking65 said:

We should probably also have a version of an editable combobox that restricts input to only allowed values and thus limits typing.

For example, we could make a version of the states combobox where the textbox behaves like the aria-autocomplete="list" textbox except that when typing, the visual focus automatically moves in the list to the firstoption that matches the input in the textbox. And, if you start typing an invalid value, nothing happens. For instance, if the edit field is empty and you type "b", nothing happens because there are no states that start with "b". If you type "n" in the empty field, the list would open and nebraska would be highlighted. If you then type "a", nothing would happen because there are no values that start with "na". On blur, the option in the list that is highlighted becomes the value. Thus, the only way to put a value in the textbox is to select it from the list.

If the combobox contains a value when it receives focus, delete and backspace would remove the entire value; it would not be possible to change the value without choosing a new one from the list. Typing would be the same as if the combobox were empty; it would replace the value and focus the first match in the list.

Because there is a textbox, you would still be able to arrow through the characters, select them, and copy to the clipboard. It is not a read-only edit field because you can change its value. It is an edit fieled where input is restricted.

This is functionally equivalent to a select-only combobox when it comes to value entry. However, it has the additional functionality of supporting delete, select, and copy. It also allows the user to type slowly. In a typical select, there is a time-out on typing. That is, if you want to scroll to "North Carolina", you have to type "no" quickly. In an editable combobox that restricts input to allowed values, you could type "n", wait for as long as you wish, then "type"o". When "n" is typed, "n" appears in the textbox and the visual focus is on "Nebraska". It stays that way until you type another character or until blur or backspace. Then, typing "o" appends "o" to the value in the textbox and moves visual focus to "North Carolina" in the listbox.