HTML versus Winapi ComboBoxes


Introduction


HTML has a good number of perfectly acceptable GUI controls/widgets available.
So too does the Windows API (Winapi).
One key element lacking from HTML, is an adequate equivalent to the Winapi ComboBox (with CBS_DROPDOWN style).
See 'Input element on top of a Select element' for an attempt at creating one.
This problem was the rationale behind this collection of GUI examples.

Options


Show an alert on each change/input event:

ListBox: Select element with 'size' option (single select)


[Winapi: similar to ListBox (single select)]


ListBox: Select element with 'size' and 'multiple' options (multi-select)


[Winapi: similar to ListBox with LBS_MULTIPLESEL/LBS_EXTENDEDSEL (multi-select)]


ComboBox 'Simple': Input element above a Select element (custom code)


[Winapi: similar to a ComboBox with CBS_SIMPLE style]
[Winapi: an Edit control and a (permanent) ListBox]
[Winapi: classes: ComboBox, ComboLBox, Edit]
[Winapi: one can be seen in Notepad's Font dialog]
note: custom code is used to make the 2 elements work together
note: the width of the Input element ('Edit') is changed at loadtime to match the Select element ('ListBox')





ComboBox 'DropDownList': Select element


[Winapi: similar to a ComboBox with CBS_DROPDOWNLIST style]
[Winapi: what looks like a Static control (there is no separate control) and a temporary drop-down menu]
[Winapi: classes: ComboBox, #32769]




ComboBox: Input element on top of a Select element (custom code)


[Winapi: similar to a ComboBox with CBS_DROPDOWN style]
[Winapi: an Edit control and a temporary drop-down menu]
[Winapi: classes: ComboBox, Edit, #32769]
note: custom code is used to make the 2 elements work together
note: a narrow Input element is placed on top of a wider Select element
note: for the closest built-in functionality, see 'Input element with Datalist element' below



ComboBox: Input element with Datalist element


[Winapi: some similarities to a ComboBox with CBS_DROPDOWN style]
note: 'Input element on top of a Select element' above is not built-in, it requires custom code
note: this is the closest built-in functionality to a Winapi ComboBox (with CBS_DROPDOWN style)
problem 1: the appearance differs between Firefox and Chrome (see below)
problem 2: the drop-down list only shows some options (options that are a substring of the current input text)
problem 3: unlike with a Select element, you can't have separate display text strings and internal values (e.g. display 'English', but store 'en')
e.g. drop-down list: 'r' matches 'Red' and 'Green'
e.g. drop-down list: 'l' matches 'Yellow' and 'Blue'


failed attempt to have separate display text and internal values:
for the Option elements, we can try to specify values, as we would with a Select element, but it doesn't work:

ComboBox: Images for comparison


Chrome shows an arrow, but only sometimes (if it's hovered over, or if the element is active)
Firefox unfortunately never shows an arrow
Chrome shows an oddly-placed large tooltip
Firefox shows an elegant drop-down menu of equal width to the Input element
Chrome/Firefox only show all options when the Input string is blank (or happens to be a substring of all options)

If options were available, they could be something like:
arrow: show always/sometimes/never
menu location: below/below-and-to-the-right
menu options: all/autocomplete only
use value strings internally (like the Select element): true/false

Winapi:
Firefox:
Chrome: