if you write "lla" it gives you Vanilla, as opposed to a select which will require you to type "v"

My understanding is that is the combination of both a standard <input> and <select>. You can either choose one of the pre-defined options from the dropdown or add your own custom value in the input.

I've tried hard to use this element on many applications but each time I always find it falling short of what I need it to do so I just end up creating a custom element. My biggest gripes are the lack of a max height attribute for the dropdown and inability to do much in terms of CSS styling. It would also be pretty slick if it was possible to select multiple values.

I don't know if it's related to the way my browser implements it, but with <datalist> once I've picked an item it's then the only one that appears if I click again on the arrow to list the options. That's not the case with <select>, which _always_ lists all available choices regardless of the one currently selected.

I can see this being confusing, and someone wondering where all the options went. They come back if you click to edit and then manually delete the text, but not everyone will think of it.

The auto-complete feature is nice and <datalist> supports custom values that aren't in the preset list, but if you have a specific list of options and only want to allow those then it seems like <select> would be more appropriate.