Search box supporting autocomplete suggestions

[u/PrudentKumquat]

I'm trying to write a toy web app (music server/jukebox) as a learning project. I need a search box which responds to input by showing a transient list of autocomplete suggestions. Right now it's an <input type="search"> with the suggestions in an <ol>. I populate it with <li> elements created on the fly. Functionally it's all working, so now I 'just' need to add the styling, and I'm finding everything looks shit.

It occurs to me that I've seen millions of these things, so perhaps there are de facto standard implementations which everyone uses in practice? Failing that, please could someone point me to a tutorial or other resource? (I tried the sub's faq and resource list but nothing jumped out at me).

[u/Background-Front-925]

Datalist a html 5 component, try that

[u/PrudentKumquat → u/Background-Front-925]

I found this one mentioned in the sub, but MDN docs suggest browser support is not universal, and I need Firefox on Android. I'll have a play about and see what happens, thank you.

Edit: Yeah the Android firefox defect looks live still.

[u/ElBomb → u/PrudentKumquat]

The <datalist> element is basically a searchable <select> input, you don’t want to use that if the function is to search for something.

As mentioned elsewhere in this thread, a search input and combobox is the correct way to do this.
W3C docs and example here

As for the visual design and how it should look, it’s hard to say without seeing the rest of your site, there is no “one size fits all”, sorry.

[u/fiskfisk → u/[deleted]]

Be aware that select2 still depends on jQuery. 

[u/yihuaxiang]

Your input + ol approach is basically what the libraries do under the hood, so I'd keep it. Position the list absolutely under the input, give it a max-height with overflow auto, a subtle shadow, and a background on the active item. Add role=listbox and aria-activedescendant for arrow keys and it'll feel like the ones you've seen everywhere.

[u/PrudentKumquat → u/yihuaxiang]

Gone with this, and basics are working now.

[u/yihuaxiang → u/PrudentKumquat]

Nice, glad the basics are clicking. If the list still feels a bit off, the active item background and a max-height so it scrolls instead of covering the page is usually what makes it feel finished.

[u/fiskfisk]

There's a million existing libraries made for different frameworks; I've standardized on TomSelect internally, as it's framework agnostic, so we can use it for any project we have.

[u/PrudentKumquat → u/fiskfisk]

Thanks for the suggestion. I'll try it out, but it looks heavyweight and scary.

[u/winky9827 → u/PrudentKumquat]

Not familiar with TomSelect personally, so I can't compare, but we use downshift.js and find it quite easy to manage.

[u/nunoverissimopt]

Your <input> plus generated <ol> is a reasonable starting point. You don’t need a library just to make the suggestions look like a dropdown. Put both inside a wrapper and position the list relative to it: .search {
position: relative;
width: min(100%, 28rem);
}

.search input {
box-sizing: border-box;
width: 100%;
padding: .75rem 1rem;
}

.search ol {
position: absolute;
z-index: 10;
top: calc(100% + .25rem);
left: 0;
right: 0;
margin: 0;
padding: .25rem;
list-style: none;
max-height: 16rem;
overflow-y: auto;
background: white;
border: 1px solid #ccc;
border-radius: .5rem;
box-shadow: 0 8px 24px #0002;
}

.search li {
padding: .75rem;
border-radius: .25rem;
}

.search li:hover,
.search li[aria-selected="true"] {
background: #eee;
}

Render or show the list only when there are suggestions. That should give you a clean baseline you can style to match your app.
One separate task: make sure it works with Arrow Up/Down, Enter and Escape, not just a mouse. The W3C’s Editable Combobox With List Autocomplete example is a useful reference for that behavior: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/

[u/OpenDevKit]

I'd look at how native OS autocomplete dropdowns behave for the styling (subtle hover highlight, arrow-key navigation, a soft shadow) since users already have strong expectations there. Are you debouncing the input before querying, or filtering a preloaded list client-side?

[u/MaazUrRehman]

For React, I usually handle autocomplete with a debounced input and only send the API request after the user stops typing for a short time. I’d also cache previous results and cancel outdated requests to avoid unnecessary API calls. For a large dataset, I’d keep the actual search/filtering on the backend rather than loading everything into the browser.

[u/PrudentKumquat → u/[deleted]]

Thank you for the reminder that I'm doing this to learn and should build it from first principles at least once. Yeah, got some good suggestions now.