4 ms·

The <datalist> element with a text input field is an HTML native typeahead, which works great with SSR or you could wire up the datalist client side with an XHR

The <datalist> element with a text input field is an HTML native typeahead, which works great with SSR or you could wire up the datalist client side with an XHR creating the datalist. You maybe don't get full control over the rendering style of it, but it's a still significantly more usable than the Angular Material autocompletes.

xigoi 3y ago
<input> with <datalist> still doesen't work on Firefox Android.
dmix 3y ago
That's an interesting one I wasn't familiar with. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da... It's a shame clicking on it doesn't show the options like a select box though.
- couchand 3y ago
  Click again I guess? > Recommended values in types text, search, url, tel, email and number, are displayed in a drop-down menu when user clicks or double-clicks on the control.
- cdcarter 3y ago
  Clicking it shows the options for me (Chrome 119).
deleted 3y ago
[deleted]
extra88 3y ago
On paper, <datalist> is great but as implemented (or not) in all browsers, it has issues. This post walks through an example of using the element but also summarizes issues (as of June 2023): Under-Engineered Comboboxen? https://adrianroselli.com/2023/06/under-engineered-comboboxen.html https://adrianroselli.com/2023/06/under-engineered-comboboxe...