[Feature] Implement and Enhance Search Functionality with Debounce and Highlight Matching Terms

[wendy640]

Problem

The project did not originally have any search functionality for filtering posts based on user input. Users cannot easily find relevant content within the posts. This lack of search limits usability, especially as the number of posts grows.

Description

This feature will implement a search bar to filter posts based on user input. The search should:

• Filter posts based on matching the title or content.

• Display "No matching results" if no posts match the query.

• Enhance performance by debouncing the search function, preventing unnecessary searches on each keystroke.

• Highlight the matching search terms within posts to improve visibility and usability.

• Reset the post list to its original state when the search query is cleared.

Alternatives

1. Basic Filtering without Debounce
2. Advanced Filters

Implementation

• Implement post filtering based on user input.

• Add a debounce mechanism to delay search execution until the user finishes typing.

• Implement highlighting of matching search terms within the post content.

• Ensure that when the search input is cleared, the original post list is restored.

• I would be interested in implementing this feature.

[possumbilities]

Vocabulary functions as a Design system with static prototype specimens for reference, an implementation like this would be something done in the dynamic layer of a project and seems outside the scope of what Vocabulary's functionality would provide.

Moving to 🚧 status: blocked Blocked & therefore, not ready for work since there is a possibility for exploring this further down the road, at least from a UX angle, even if the behavior isn't facillitated within Vocabulary itself.