From the course: Building Full-Stack Applications with HTMX

Project 1: Search functionality - HTMX Tutorial

From the course: Building Full-Stack Applications with HTMX

Start my 1-month free trial Buy for my team

Project 1: Search functionality

“

- [Instructor] In this section, we'll be building a simple search functionality using HTMX and a Node.js backend. And in this video, I'll be walking you through the scope of the project and our implementation strategy. So let's get right into it. As I have mentioned earlier, we'll building a search feature. This search feature will enable us search through a repository of students. Users of this feature will be able to type in a keyword into a search field and students whose name or email matches the keyword will be displayed in the search results. The search process will also be happening in near realtime, so the user does not need to click the typical Search button to pull up results. As the keyword is being typed, the students that match the search phrase will be automatically pulled up, and we'll be using HTMX to power all this functionality, together with an hypermedia API built with Node.js. On the backend side of things, we'll be setting up and seeding the database with student data. We'll then write a search endpoint that will return search results from the student database based on the keywords submitted by the user. HTMX works with hypermedia APIs, meaning that our endpoints are to return HTML and not the usual JSON or XML formats that data APIs typically return. Thus, we'll be building up our search results into HTML markups and sending them as our response to the client. While we can use standard HTML templating libraries like EJS or Handlebars to construct and return our HTML responses, in this project, we'll be making use of JavaScript template strings. This is to reduce our dependence on external libraries in cases where native solutions can do the job. Now that we have a good understanding of what we'll be building in this section, let's get the fun started in the next video.

Contents