active search with results in a drop down

[bfallik]

Hi,

I'm eagerly learning HTMX but hit a roadblock trying to build my design. My goal is to expose a search box in the sidebar. When the user types in their search terms, I want to fire off an async request for the search results. The twist is that I want the results displayed within a dropdown underneath the search box that only appears during a search, and I want that dropdown to contain a spinner while the search query is in-flight.

A similar example for what I'm trying to achieve is Google Search. The search box is empty until the user starts entering their terms, and then results are populated in a dropdown that appears underneath the search box.

I'm following the active search example but can't figure out how to integrate that with a drop down.

Any tips on how to make this happen? Thx in advance!

[rpmoore]

You might be looking for something like this

[eddy-oj]

I like the idea of datalists but I don't like how datalist appear on mobiles, or even desktop browsers for that matter.

I feel like this is a really common problem in data problems and I think an officially advised solution would do wonders for htmx. Without it, I feel obliged to go down the route of backend with inertia.js and react despite really wanting htmx to be the one solution we need.