Add a Search Bar to Filter Templates in the Table #433
Description
Feature Request 🛍️
Currently, the template table in the index.njk file lists all templates but lacks a search functionality. A search bar should be added to allow users to quickly find a specific template by name.
Use Case
-Users should be able to search for templates within the table using a search bar.
-The table should dynamically filter the rows as users type.
-If no matching results are found, a "No results found" message should be displayed.
Possible Solution
-Add an input field () above the table with a placeholder "SEARCH FOR TEMPLATE".
-Use JavaScript to filter the table rows based on user input.
-Hide non-matching rows dynamically while typing.
-Show a "No results found" message if no matches are found.
-Ensure UI consistency with existing styles (Bulma CSS).
BEFORE
AFTER
Context
-Currently, users manually scroll through the list to find templates, which is inefficient.
-A search bar will improve user experience by making navigation faster and easier.
-This will make the template library more accessible for contributors and users.
Detailed Description
While going through the youtube documentation of accord project about (Smart Legal Contracts Using The Accord Project And Hyperledger Fabric) by John Carpenter, I came across this issue where he finds it difficult to search for the template. (you can find the video below, skip to the timeline 2:20 - 3:05)
https://www.youtube.com/live/LYEnVLAZONw?si=LdFtOo7HUxc6iym2
This feature will modify the index.njk file by:
✅ Adding a search input field above the table.
✅ Using JavaScript to dynamically filter the templates.
✅ Showing "No results found" when no templates match the query.
✅ Keeping the existing styling to match the current UI.