[FEATURE] Add Interactive Sub Scroll Panel for Enhanced Search Functionality.

[apoorvmaurya]

Detailed description

I would like to propose the addition of an interactive sub scroll panel to the existing search functionality which will aim to assist users during the search process by providing a dynamic preview of potentially relevant content as they type their search query. This will facilitate quicker and more accurate content discovery, particularly in cases where the exact search terms might be ambiguous or when users are unsure about the precise wording.

And yes, remove the 'You are searching for...' text, given that you are approving my proposal that is!

And while there is no input in the search bar, hide the 'No results found try searching something different' instead there should be the showcasing of events sorted in a way such that the most popular ones or those with the closer dates should be reffered. And ofcourse when the user types incorrect search inputs then only make that visible.

Context

It will improve the Vibey's efficiency and will enhance UX, faster content disscovery and will reduce cognitive load

Possible implementation

No response

Additional information

• As the user starts typing in the search bar, the sub scroll panel should appear right below the search bar.
• The sub scroll panel should dynamically update its content as the user continues typing, reflecting the most relevant matches based on the input.
• The content snippets in the sub scroll panel should be click- or tap-able, allowing users to jump directly to the respective content.
• The sub scroll panel should intelligently adapt its size and layout to accommodate varying lengths of content snippets while ensuring a seamless user experience.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

To reduce notifications, issues are locked. Your issue will be unlock when we will add label as status: ready for dev. Check out the contributing guide for more information.

[suzy-g38]

@apoorvmaurya from what I understood from the description of the proposed change, you want to add "Autocomplete" functionality right?...correct me if I am wrong.

[apoorvmaurya]

nope @suzy-g38 but it can be a sub-functionality, but what I want to say is that when an individual types (say any alphabets), it should automatically start suggesting every available events with that very alphabets your site has in it's database just like the google search bar does (google gives us every possible sentences or words that we may want to search and as we continue to type, the suggestion gets more and more precise )

[suzy-g38]

nope @suzy-g38 but it can be a sub-functionality, but what I want to say is that when an individual types (say any alphabets), it should automatically start suggesting every available events with that very alphabets your site has in it's database just like the google search bar does (google gives us every possible sentences or words that we may want to search and as we continue to type, the suggestion gets more and more precise )

okay....how do you want to proceed?

[apoorvmaurya]

.how do you want to proceed?

well....for starters! by attaching an 'onchange' event handler to the input field that will trigger AJAX requests to a dedicated API route in NextJS whenever the user types then that request will be handled on the backend, where we'll utilize MongoDB to fetch the relevant suggestions based on the user's input. We'll then format and return the suggestions as JSON responses from the API route. These suggestions will be then displayed in the frontend dropdown, styled using TailwindCSS.

[suzy-g38]

.how do you want to proceed?

well....for starters! by attaching an 'onchange' event handler to the input field that will trigger AJAX requests to a dedicated API route in NextJS whenever the user types then that request will be handled on the backend, where we'll utilize MongoDB to fetch the relevant suggestions based on the user's input. We'll then format and return the suggestions as JSON responses from the API route. These suggestions will be then displayed in the frontend dropdown, styled using TailwindCSS.

Okay understood. Just do one thing instead of calling the server API every time a user types a character, make a limit of at least 3 characters should be written after that you will start calling the server API, example: as you suggested so if the user types "a" then according to you there will be a server call, but instead of that do the server call after user types "abc".

I am suggesting this to reduce the number of database calls. Your proposal is great but we have to keep in mind the database call. We always have to minimize the database load.

I am assigning this to you. You can start work on it.

[ZeeshanMustfai]

@suzy-g38

.how do you want to proceed?

well....for starters! by attaching an 'onchange' event handler to the input field that will trigger AJAX requests to a dedicated API route in NextJS whenever the user types then that request will be handled on the backend, where we'll utilize MongoDB to fetch the relevant suggestions based on the user's input. We'll then format and return the suggestions as JSON responses from the API route. These suggestions will be then displayed in the frontend dropdown, styled using TailwindCSS.

Okay understood. Just do one thing instead of calling the server API every time a user types a character, make a limit of at least 3 characters should be written after that you will start calling the server API, example: as you suggested so if the user types "a" then according to you there will be a server call, but instead of that do the server call after user types "abc".

I am suggesting this to reduce the number of database calls. Your proposal is great but we have to keep in mind the database call. We always have to minimize the database load.

I am assigning this to you. You can start work on it.

@suzy-g38 I have a suggestion for using the useDebounce hook for Delay a little bit while the user types something into the search bar except checking the character limit of at least 3. This character limit is useful only for first and whenever the user across 3 characters again API should call on every onChange character which wrong.