The <datalist> element tries to address a common use case: it provides an autocomplete-enabled input so that as the user types, they see a filtered list of valid options.
It's great for prototyping, but its extensibility is so limited that it's not actually useful for real production applications. For example, you can't bold the parts of the options in the dropdown that match the input the user has entered in the text box. You can't add images or other rich content in the options. You can't style the dropdown itself. You can't do fuzzy matching. You can't receive events as the user keyboard-navigates through options...
It's a shame, since it's not a bad start, but users expect more than what <datalist> provides, and so we always have to go with a custom solution.
It's great for prototyping, but its extensibility is so limited that it's not actually useful for real production applications. For example, you can't bold the parts of the options in the dropdown that match the input the user has entered in the text box. You can't add images or other rich content in the options. You can't style the dropdown itself. You can't do fuzzy matching. You can't receive events as the user keyboard-navigates through options...
It's a shame, since it's not a bad start, but users expect more than what <datalist> provides, and so we always have to go with a custom solution.