Filter items by search criteria or by date using JavaScript on a static page ⏳
In this 3-part series, I'll show you how to add a sprinkling of HTML and JS for filtering to get interactivity and "liveness" on static HTML pages.
What are the use-cases? 🔭
- You want to write future-dated blog posts that only become visible to users on or after the publish date, without updating your HTML by hand or redeploying your statically-generated blog.
- You want list of upcoming events that is always up to date and doesn't show past events.
- You have a list or table of items like repos or books and you want to filter items by name as the users enters input in a search bar, without using a submit button.
- You also want to let the user filter and sort by star count, in addition to name.
Frontend vs server-side filtering 🔁
The frontend filtering solution I cover here works for any HTML page and even a one-page HTML site.
This approach it works particularly well if you have a statically generated site built with Jekyll, Hexo, Vuepress or Gatsby. Since the content is rendered to HTML at build time and we can add JS to make it dynamic.
This frontend approach on local data works without the user having to reload the page and having to do an API request. And this means you don't have to rewrite your entire static site to use Node.js/Express, Python/Flask or PHP.
Show me how! 👨🏫
Okay, on to the code... 👨💻
Here are the blog posts in this series - they include code samples and explanations on how to set this up on your project.
Continue on to Part 2 - Use plain JavaScript.
Top comments (0)