4. Search

Search is a fundamental part of all applications. Empowering your users to find any data within a system with a few keystrokes can transform how your users view your application. A great user experience for search is almost as necessary as the search results in themselves. With HTMX, we can lean on all the input events available to increase the responsiveness of our search experience.

The following example will show how to transform a tedious input into a debounced search-as-you-type experience. You'll be using the hx-trigger attribute with keywords like keyup, changed, and delay:250ms to hold a query until a user has stopped typing.

On the ASP.NET Core side, we'll search an existing collection using the Query property. Note how the URL changes as the back-end code handle the client requests. We are utilizing HTMX response headers to push new URLs into the client's history. A powerful and necessary feature as we continue to build more complex user experiences.

You may also notice we have begun utilizing ASP.NET Core partial views. You must break down your user experience in terms of components to help create smaller Razor partials. In a worst-case scenario, you can lean on rendering the entire page, but in that case, you would lose most of the benefits of HTMX. It takes some practice, but I believe anyone can learn this skill. As always, there are many ways to solve a problem, so experiment and have fun.

Retro Games

Year	Publisher	Console	Name
1993	Nintendo	NES	Super Mario Bros. 3
1992	Nintendo	SNES	The Legend of Zelda: A Link To The Past
1992	Capcom	Arcade	Street Fighter II Turbo
1992	Sega	Mega Drive	Sonic The Hedgehog 2
1986	Sega	Arcade	Outrun
1978	Taito	Arcade	Space Invaders
1992	Sega	Mega Drive	Streets Of Rage 2
1994	Nintendo	SNES	Super Metroid
1972	Atari	Atari	Pong
1996	Capcom	Playstation	Resident Evil
1995	Squaresoft	SNES	Chrono Trigger

Note: This is the most sophisticated UI experience so far, and yet there's not much to it. Amazing, right?!