⚡ Ionic Select Searchbar

• App created using the Ionic framework and the Ionic Selectable search component to create a list of selectable elements.
• Tutorial code from Simon Grimm at the Ionic Acdemy - see 👏 Inspiration below
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic Select Searchbar
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features - Ionic Selectable
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• array of data used to test selectable searches.

📷 Screenshots

📶 Technologies

• Ionic/angular v6
• Ionic v6
• Angular v15
• Ionic Selectable v4 An Ionic component similar to Ionic Select, that allows user to search items, including async search, infinite scrolling and more. @ionic-selectable/angular exists but has no documentation so I did not use it.

💾 Setup

• Run npm i to install dependencies
• To start the server on localhost://8100 type: 'ionic serve'

💻 Code Examples

<ion-item>
  <ion-label>Group example</ion-label>

  <ionic-selectable
    [(ngModel)]="group"
      itemValueField="id"
      itemTextField="name"
      groupTextField="type"
      [items]="groups">

      <ng-template ionicSelectableGroupTemplate let-group="group">
        {{ group.text }}
      </ng-template>

  </ionic-selectable>
</ion-item>

🆒 Features - Ionic Selectable

• Features copied from Ionic component documentation:

• Single selection

• Multiple selection

• Search items

• Search items asynchronously

• Search by several item fields

• Forms

• InfiniteScroll

• VirtualScroll

• Templates

• Grouping items

• Editing, adding and deleting items

• Disabling items

📋 Status & To-do list

• Status: Working
• To-do: Nothing

👏 Inspiration

• Project inspired by Simon Grimm´s Youtube video: Ionic Searchable Select Component Customisation

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com