ionic-select-searchbar's Introduction

⚡ 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

📚 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: [email protected]

ionic-select-searchbar's People

Contributors

Stargazers

Watchers

ionic-select-searchbar's Issues

Feature Request: Provide as an installable package

I've just come across this project, as I'm looking for a plugin that effectively offers the IonSearchbar interface but with the underlying functionality of acting as IonSelect when selecting a result and then showing it afterwards. It's a wonderful piece of work but, unless I'm missing something, this doesn't appear to provide a package that can be installed (via NPM/Yarn) for use in other projects.

It feels native to Ionic 5 but being usable for those with their own projects and not a demo in itself would probably get this project a lot more traction and interest for those wanting to work on React and Vue support, (per my other Feature Request).

Thanks (and great work!) 😃

Feature Request: React (and Vue) version/support?

It would be good to be provided as a multi-framework plugin that works with Ionic Angular, React (and Vue, now that it's available and stable).

I may have to roll my own solution in the meantime but would happily contribute to this in any way I can, (despite this being my first use of React, TypeScript and full 'native' app (not webview bits) in a project all at once) if it means I can adapt this work to React.

Recommend Projects

andrewjbateman / ionic-select-searchbar Goto Github PK