This means that we need to create a function, let's say called renderSearchResults that has only one parameter, the "text from the input", and that function searches through all the data and returns the cocktails that have the text from the input included in the name.
Suggestion: Try first to do the event listener without connecting it to the data, then make some functions that don't render anything, they just console.log() a result if the search is found and then try to connect these two concepts to render the appropriate data.
Please add the onchange event listener on the c-input element. A good example of how to use it and further explaining can be found here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event. Also, please notice that the on change event fires only when the input loses focus. Study this page as well to see other options of getting the user input https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event
The request is that this event, initially, is to render the text from the input inside of the search menu as shown in the video below.
https://github.com/Stellar-Junior-Dev/cocktailMasters-cosmin/assets/36665504/4ae20676-cf7e-429a-b80a-ac87a0b2beab
After this first initial step is done and the concepts are understood, the behaviour should be the following:
https://github.com/Stellar-Junior-Dev/cocktailMasters-cosmin/assets/36665504/68a94b21-fb04-41a9-9a7d-a91a6d07e661
This means that we need to create a function, let's say called renderSearchResults that has only one parameter, the "text from the input", and that function searches through all the data and returns the cocktails that have the text from the input included in the name.
Suggestion: Try first to do the event listener without connecting it to the data, then make some functions that don't render anything, they just console.log() a result if the search is found and then try to connect these two concepts to render the appropriate data.