Ion-select with Searchbar


#62

Perfect!:heart_eyes:
Many thanks! I hope I didn’t disturbed you too much :sweat_smile:


#63

No problem :slightly_smiling_face:


#64

Perfect !!! Thanks alot eakoriakin !!! I have no idea where to start until i came across your solution ^^


#65

I have large number of data to display, will it support pagination with ion-infinite-scroll?


#66

Hi @prabamkd, there’s no support for it right now, but I think I can add it. I’ll try to do it within the next few days.


#67

Hello @prabamkd, I’ve added support for infinite scroll. Check this commit 1f5934d. I’ll try to update the demo later, I’m having some problems with Plunker right now. Let me know if it works fine for your scenario.


#68

Hi @eakoriakin! Great component! Works like a charm. Quick question. Is there a simple way for me to load your component within a modal (ionic 3) as opposed to a page element? Thanks in advance!


#69

hi!
I’ve looking for exactly a ion-select with searchbar and an infinite scroll, I’m tried to apply your demo in my project but this wasn’t successful :confused: I got some errors

… Could u explain me better how i can use ur code, please


#70

Hey @injavp! Can you check a path to select.html file? From the screenshot I can say that the path must be incorrect.


#71

You´re right, the problem was in select.ts, in @Component { templateUrl }, the url was wrong
thanks! finally works :slight_smile:


#72

Thanks @eakoriakin for the plugin. I would get you a cold one if I could.


#73

Thanks :slight_smile:


#74

Thanks @eakoriakin. it works like a charm.


#75

@prabamkd, no problem :slightly_smiling_face:


#76

Hello @eakoriakin ,Nice One
I want to load the values for my select from rest server and display none when the page loads for the first time , and when the user enters some text the list updates according to the value and i want the user to be able to choose multiple values
can you help me with this scenario plz?


#77

Hi @wasiiim, sure, it’s easy to do. Have a look at the demo to get a working code. Headings “With search” and “Multiple selection”.

Here is a piece code to give you a general idea:

Template

<select-searchable
    [(ngModel)]="port"
    title="Port"
    itemValueField="id"
    itemTextField="name"
    [items]="ports"
    [canSearch]="true" // This enables filtering the list as user types.
    [multiple]="true" // This allows multiple selection.
    (onChange)="portChange($event)">
</select-searchable>

TypeScript

@Component({
    ...
})
export class HomePage {
    port: Port;
    // Ports array is empty from the beginning.
    ports: Port[] = [];

    constructor(private formBuilder: FormBuilder) {
        // Here you get ports from the server using, say, Angular 2 Http, and assign ports array.
    }

    portChange(event: { component: SelectSearchable, value: any }) {
        // Do something when port changes.
        console.log('value:', event.value);
    }
}

#78

Hi @rockfordbuzz, sorry for a late response, I’ve had a hectic week. I created a demo for you showing how to use SelectSearchable inside Modal. Have a look at this commit. I’ll try ti update Plunker demo later.


#79

Thnx a lot You’ve been very helpful :slightly_smiling_face:


#80

Hello @eakoriakin again …
I used ion-select in my app and every thins is ok till i use it in a form
the problem is when the form page is loaded i’m not able to edit any input
it’s just givin’ me a cursor and when i press it it leads me to the ion-select page
also can the results load in some alertController for instance without the need to another page
Hope you answer me soon


#81

Hi @wasiiim, can you share a sample of how you use the component inside a form?
Also, have a look at the demo “Using together with Angular 2 Validators”, it shows how to use the component with Angular forms, e.g. FormControl, formControlName, …

Regarding alertController. Unfortunately, it’s not possible to use SelectSearchable with alertController, because the latest, as far as I know, doesn’t allow to customize the template/HTML, so features like search can’t be added to alertController.