Discover Delicious Cocktail Recipes with our Mobile App

Table of Contents

1. Introduction
2. Changing the Tab Icon and Name
3. Setting Up the Search Functionality
4. Creating the Search Text Box
5. Fetching Search Results
6. Displaying Loading Spinner
7. Handling No Search Results
8. Displaying Drink Cards
9. Styling the Search Results
10. Conclusion

Introduction

Hey, what's going on everybody? It's Rob, aka The Diligent Dev, and welcome back to part three of our cocktail recipe app utilizing Vue.js, the Ionic framework, and the Cocktail DB. In this section, we will be working on our third tab, where we will have a free form search text box. When the user types in their search, we will display search results based on what they have searched for. So, let's jump right into it!

Changing the Tab Icon and Name

To start, we will change the tab icon and name for the third tab. We will update the icon to a search icon and the name to "Search". This will make it clear to the user that this tab is for searching. Once we make these changes, we can save and see the updated icon and name in our app.

Setting Up the Search Functionality

Next, we will head over to the view for the third tab and start working on our search functionality. We will use the "search cocktail by name" endpoint from the Cocktail DB API as our endpoint for the search. When the user types in their search query, we will make a request to this endpoint and retrieve an array of drinks that match the search. We will then display the drink details in a list of cards.

Creating the Search Text Box

To allow the user to enter their search query, we will create a search text box. We will add an IonSearchBar component to the toolbar in the header section of the view. This component will have a debounce attribute set to 500ms, which will delay the API request until the user pauses their typing. We will also add an onIonChange event to call the fetchSearchResults method and pass in the search term.

Fetching Search Results

In the fetchSearchResults method, we will make an asynchronous AJAX call to the Cocktail DB API using the axios library. We will pass in the search term as a parameter in the URL of the API request. If we receive a response from the API, we will update the state with the search results. If there are no search results, we will display a message indicating that there are no results. Finally, we will set loading to false to indicate that the search request is complete.

Displaying Loading Spinner

While the search request is being processed, we will display a loading spinner to indicate to the user that the app is working. We will conditionally render an IonSpinner component centered in the ion-content based on the loading state. This will provide visual feedback to the user that their search is being processed.

Handling No Search Results

If the search query does not yield any results, we will display a message to inform the user. We will conditionally render an IonLabel component with the message "No results. Please search above." This will help the user understand that their search did not match any drinks.

Displaying Drink Cards

If the search query does yield results, we will display the drink details in a list of cards. We will use the DrinkCard component that we created in the previous video to render each drink card. We will use a v-for directive to iterate over the search results and pass the drink details to the DrinkCard component.

Styling the Search Results

To improve the appearance of the search results, we will add some styling to the view. We will center the loading spinner and the "No results" message using CSS. Additionally, we will adjust the height of the search text box and the position of the search results cards to create a better user experience.

Conclusion

In this video, we implemented the search functionality for our cocktail recipe app. Users can now enter their search queries and see the matching drink results. We also added visual feedback to indicate loading and handled cases where there are no search results. In the next and final video, we will refactor some code and polish our app for a better user experience.

Highlights:

• Implemented search functionality for the cocktail recipe app
• Users can enter search queries and see matching drink results
• Added visual feedback for loading and handled cases with no search results
• Next: Refactoring and polishing the app for a better user experience