Ion-select with Searchbar

Now SelectSearchable is available as an npm module :grinning:

npm install ionic-select-searchable --save

3 Likes

Thanks for your reply …
actually the problem was that i didn’t put the tag inside of so it was taking the whole screen …my Mistake :persevere: about the sample here it is
inside the component
this.truckForm=this.fb.group({
//another controllers

drivers:[this.user,Validators.required],
}
)
where this.user is an array of users
in the template
<select-searchable title=“Choose The Drivers” itemValueField=“uid” itemTextField=“name” [items]=“users”
[canSearch]=“true”
[multiple]=“true”
[canReset]=“true”
(onChange)=“portChange($event)” formControlName=“drivers”>

Hope this Helps some one
every thing is ok for me :smiley::smiley::smiley:

1 Like

Hey @wasiiim, great :+1:

@eakoriakin I am also trying to implement same but on an Ionic alert box/window.

I know that it is possible using Ionic Modals, but I will prefer Ionic alert over it.

Do you have any suggestion how I can achieve the same in an alert box?

1 Like

Hi @sujit77, I also tried with Alert initially, but had to use Modal eventually. As far as I know, Alert doesn’t allow to customize the template/HTML, so features like search can’t be added to Alert.

Do let me know, please, if you figure it out with Alert.

Hi, I’m using the node module and i just can’t make it work. Here is my problem:

and specs:

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.0.3
Angular Compiler CLI: 5.0.3
Node: 8.9.4
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36

Hi @Diego74965, you must be importing SelectSearchableModule instead of SelectSearchable.
Try to update the package: npm i ionic-select-searchable@1.0.9

And then import SelectSearchable class to your component.
import { SelectSearchable } from 'ionic-select-searchable';

Hope it helps :slight_smile:

Hello!

I have a problem :frowning: . I need to do a two way binding with the selectedItems because I put the select on iterable form.

Have you any way to do that?

Thanks you very much :smiley:

Hi @patosartore, can you give a sample code, please, so I can understand exactly what you need?

Hi @eakoriakin,

Is there any way I can use your npm module ionic-select-searchable with angular 4? or specifically angular 4.4.3?
When I take the version 1.0.7 of your module, I get the following error

SelectSearchableModule in /node_modules/ionic-select-searchable/source/select-searchable.module.d.ts’ imported by the module ‘ConfigModule in config/src/config.module.ts’. Please add a @NgModule annotation.

Any help much appreciated.

Hey, try 1.0.9 version. Also, if you need to build it for Android later, use —release flag instead of —prod

@eakoriakin. Thanks for the reply. Actually I tried using 1.0.9 at first, it says metadata version mismatch for module found version 4 expected 3. Hence tried a lower version. Any solution for the metadata mismatch?

on load of a page. ngmodel variable is not binding. i am not able to set a value to variable onload of a page. can anyone help me?

Hi @akshaysm, can you show me how you do it? What do you have in your class and in HTML?

1 Like

@eakoriakin this is my HTML
<select-searchable name=“country” [(ngModel)]=“country” title=“Country” [items]=“countryList” itemValueField=“CountryId” itemTextField=“Description” [canSearch]=“true” (onChange)=“country($event)” searchPlaceholder=“Search your Country”>

in class i just have

country(event: { component: SelectSearchable, value: any }) {
this.user.CountryId = event.value.CountryId;
}

1 Like

Okay, so:

<select-searchable
  name=“country” // No need for "name" attribute. Probably, remove it.
  [(ngModel)]=“country”
  title=“Country”
  [items]=“countryList”
  itemValueField=“CountryId”
  itemTextField=“Description”
  [canSearch]=“true”
  (onChange)=“country($event)” // Rename it to "onCountrySearch", because "country" is used for [(ngModel)]already.
  searchPlaceholder=“Search your Country”>
<select-searchable/>

Corrected:

<select-searchable
  [(ngModel)]=“country”
  title=“Country”
  [items]=“countryList”
  itemValueField=“CountryId”
  itemTextField=“Description”
  [canSearch]=“true”
  (onChange)=“onCountrySearch($event)”
  searchPlaceholder=“Search your Country”>
<select-searchable/>

Class:

country: any;

constructor() {
  this.countryList = [{ CountryId: 1, Description: 'Japan' }, { CountryId: 2, Description: 'Seychelles' }]

  // Do actual binding to "country" field, that we use in our ngModal.
  this.country = { CountryId: 1, Description: 'Japan' };
}

onCountrySearch(event: { component: SelectSearchable, value: any }) {
  this.user.CountryId = event.value.CountryId;
}

Hi,

I’m new to Ionic. When I select more items from selection screen, it displays the items as a list in select instead of displaying all selected items in single line with dots…

In demo it’s showing as all selected options in single “div” as in below image.

single%20line

But for me it displays each item in single line and occupies more space like:

multiline-dropdown

Please let me know how can I display all selected item as in 1st image.
Thanks!

hi, please add close event like ion-select close to close select modal programmatically.
thanks.

Hey, do you mean close() method? So you can close select page from code?

Hi @Aanand9, I’ve added an ability to create templates of any complexity for value/select item/s in ionic-select-searchable@2.0.0 release.

There some breaking changes in 2.0.0 version, so please follow the instructions to update first.

When update is complete you can use the code below to display selected items in a line ending with ellipsis (…).

<select-searchable [items]="ports">
    <ng-template selectSearchableValueTemplate let-ports="value">
        <div class="select-searchable-value-item">
            {{formatPorts(ports)}}
        </div>
    </ng-template>
</select-searchable>

formatPorts(ports: Port[]) {
    return ports.map(port => {
        return port.name;
    }).join(', ');
}