Home / Blog / How to create a Search screen

How to create a Search screen

26 Jun 2024 · 6 min read

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Search screen significantly contributes to user satisfaction by simplifying the process of discovering specific content or features. It is designed to streamline navigation, making the application more user-friendly and responsive to individual preferences.

This article provides a thorough guide for designers and developers to effortlessly incorporate a user-friendly Search screen into their applications. The seamless integration is facilitated by utilizing design components from the Ionic Kit, which is constructed upon the sturdy foundation of the extensive Ionic framework library.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start search-screen blank --type=react

3. Get inside the project directory

cd search-screen

4. Create page Search.tsx inside src/pages and add code

import { IonPage } from '@ionic/react';

const Search: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Search;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Add the header for the page

For convenience, we will be using the layout structure recommended by Ionic for our screen. This allows us to add header code and content inside the <IonPage></IonPage>.

<IonHeader>
  ...
</IonHeader>
<IonContent>
  ...
</IonContent>

6. Add the toolbar

Inside the IonHeader component, add the IonToolbar component to fix buttons at the top of the content.

<IonHeader>
  <IonToolbar></IonToolbar>
</IonHeader>

7. Place the button at the beginning of the toolbar

Inside the IonToolbar component, add the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
    </IonButtons>
  </IonToolbar>
</IonHeader>

8. Add the back button

Within the IonButtons component, include the IonBackButton component, setting the property defaultHref='#', to create a back button that navigates back in the app's history upon being clicked.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#'></IonBackButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

9. Add another button at the end of the toolbar

Add another IonButtons component, and set the slot to end. This positions the button at the end of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonButtons slot='end'>
    </IonButtons>
  </IonToolbar>
</IonHeader>

10. Within the IonButtons add the IonButton component

11. Place the icon component within the button

Inside the IonButton component, place the IonIcon component with the properties slot='icon-only' and icon={ellipsisHorizontal} to define that this component should be used as an icon in an option that has no text, using the icon from Ionic icons.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={ellipsisHorizontal}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

12. Add a toolbar component again

Add another IonToolbar component to fix the screen's title at the top of the content.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={ellipsisHorizontal}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
  <IonToolbar>
  </IonToolbar>
</IonHeader>

13. Place the title within the toolbar

Within the IonToolbar place the IonTitle component with the text 'Search' inside. Set the property size as large to define size of text.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={ellipsisHorizontal}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
  <IonToolbar>
    <IonTitle size='large'>Search</IonTitle>
  </IonToolbar>
</IonHeader>

14. Add another toolbar

Add another IonToolbar component to fix the search toolbar at the top of the content.

15. Insert the search bar component

Inside the IonToolbar include the IonSearchbar component that can be used to search through a collection.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={ellipsisHorizontal}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
  <IonToolbar>
    <IonTitle size='large'>Search</IonTitle>
  </IonToolbar>
  <IonToolbar>
      <IonSearchbar></IonSearchbar>
  </IonToolbar>
</IonHeader>

16. Add the content component

After the IonHeader section add the IonContent component with class ion-padding-top to style the content within.

<IonHeader>
  ...
</IonHeader>
<IonContent className='ion-padding-top'>
  ...
</IonContent>

17. Place the text within the content component

Inside the IonContent component, add the IonText component and set the property color as medium to style the color of text. The text inside will show search results.

<IonContent className='ion-padding-top'>
  <IonText color='medium' className='ion-margin'>23 results</IonText>
</IonContent>

18. Add the list component

Add the IonList component to organize the search results. Add the class ion-margin-top to style the content inside.

<IonContent className='ion-padding-top'>
  <IonText color='medium' className='ion-margin'>23 results</IonText>
      <IonList className='ion-margin-top'>
  </IonList>
</IonContent>

19. Place the items within the list

Inside the IonList, place the IonItem to display one item of search results. Add the class ion-margin-bottom to style the content inside.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
  </IonItem>
</IonList>

20. Place the avatar inside the item

Inside the IonItem, place the IonAvatar to represent a person's avatar. Set the property slot to start to position the avatar at the beginning of the item.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonAvatar slot='start'>
    </IonAvatar>
  </IonItem>
</IonList>

21. Add the img tag inside the avatar

Within the IonAvatar, add the img tag. We used the value https://ionicframework.com/docs/img/demos/avatar.svg for the src attribute according to the Ionic example.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonAvatar slot='start'>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
    </IonAvatar>
  </IonItem>
</IonList>

22. Add the label component

Next, add the IonLabel component to display information about the person. Set the text 'Glenn Fisher' inside.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonAvatar slot='start'>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
    </IonAvatar>
    <IonLabel>Glenn Fisher</IonLabel>
  </IonItem>
</IonList>

23. Repeat steps 19 to 22 with the name of the user

Repeat steps 19 to 22 to add another item of search results. Set the text 'Gloria Edwards' inside the IonLabel.

24. Repeat steps 19 to 22 with the name of a different user

Repeat steps 19 to 22 to add another item of search results. Set the text 'Gladys Vanderbeck' inside the IonLabel.

25. Repeat steps 19 to 22 with the name of a different user

Repeat steps 19 to 22 to add another item of search results. Set the text 'Gladys Lopez' inside the IonLabel.

26. Repeat steps 19 to 22 with the name of a different user

Repeat steps 19 to 22 to add another item of search results. Set the text 'Gladwin Williamson' inside the IonLabel.

27. Repeat steps 19 to 22 with the name of a different user

Repeat steps 19 to 22 to add another item of search results. Set the text 'Ariana Glenflied' inside the IonLabel.

28. Add the All Results button

After the IonList, place the IonButton with the properties expand='block', fill='clear', and size='small' to style the button. Place the text 'All results' inside.

<IonContent className='ion-padding-top'>
  <IonText color='medium' className='ion-margin'>23 results</IonText>
  <IonList className='ion-margin-top'>
    ...      
  </IonList>
  <IonButton
    expand='block'
    fill='clear'
    size='small'
  >
    All results
  </IonButton>
</IonContent>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made in New Zealand 🇳🇿 at  Sliday