Ion-select with Searchbar


#21

How can i use this with data from API server?


#22

Hi @rezhaa, have a look at this demo. Find a paragraph With Async Search (AJAX).

Below is the code as well.

<select-searchable
    [(ngModel)]="port4"
    title="Port"
    itemValueField="id"
    itemTextField="name"
    [items]="ports"
    [canSearch]="true"
    searchPlaceholder="Enter port name"
    (onSearch)="searchPorts($event)"
    (onChange)="portChange($event)">
</select-searchable>
export class HomePage {
    port4: Port;

    searchPorts(event: { component: SelectSearchable, text: string }) {
        let portName = event.text || '';
        // Show loader while loading data from the server.
        event.component.isSearching = true;
  
        // Use some service to get data from the server and stop the loader when finish.
        this.portsService.getPorts(portName).subscribe(ports => {
            event.component.items = ports;
            event.component.isSearching = false;
        });
    }
  
    portChange(event: { component: SelectSearchable, value: any }) {
        console.log('value:', event.value);
    }
}

#23

thanks, but i have problem with getPorts() function, it always returns undefined, can you share the getPorts() code as well?


#24

@rezhasdf, you can implement getPorts() method with Angular 2 Http service.
This way for example:

export class HomePage {
    constructor(private http: HttpClient) {}

    getPorts() {
        return this.http.get('/api/ports');
    }
}

#25

@eakoriakin - This is awesome! Thanks for taking the pain to come up with a fully working sample!!

Do you happen to have this in a proper Ionic 3 app structure? That would be great!

Thanks!


#26

thanks a lot! :))))))


#27

Hi @gauz09! I’ve prepared a demo repository for you, have a look select-searchable-demo. It uses the latest Ionic 3.6.0 version available at the moment.


#28

That is perfect @eakoriakin! Thanks so much for taking the time out to do this, highly appreciated! :+1:


#29

@gauz09 you are welcome! :slightly_smiling_face:


#30

Hi sir,
I tried the code. I got an error as follows…

Cannot find name ‘Port’.
D:/Ionic/SimBing/src/pages/sample/sample.ts
export class SamplePage {
ports: Port[];
port1: Port;

Can you help me to solve this.
Thanks.
Divya


#31

Hi @divyanaireficaz,

It seems to me that you don’t have Port class in your project.
Take a look at this select-searchable-demo repository. It works fine.


#32

Thank you for fast reply. I implement the port class to my folder. That issue solved but showing another issue

Runtime Error
Can’t resolve all parameters for SamplePage: (?).


#33

Great stuff! Works like a charm!


#34

@eakoriakin Thanks a million for your work. Exactly what was needed for the project I’m working on. You should add your first post (with screenshots and API) to the README.md on your Github repo. An npm package would be great too!


#35

Thanks for a feedback! I added description and screenshots to README.me. I’ll try to put the component into an installable npm package when I have some time.


#36

Hi, thanks for the add-on, but I have a question, how can I implement it with Firebase?


#37

Hey @Maddox! I’m not sure what you mean. Firebase is a database engine and Ion-select is a front-end component. What are you trying to achieve?


#38

Thanks for taking some time. What I want to do, I have a large list of elements and I only want the user to choose an element, without my item list being displayed on the form.


#39

Okay, so I think you are looking for autocomplete functionality.

  1. Set up HTML
        <ion-item>
            <select-searchable
                [(ngModel)]="port4"
                title="Port"
                itemValueField="id"
                itemTextField="name"
                [items]="ports"
                [canSearch]="true"
                searchPlaceholder="Enter 3 or more characters, e.g. &quot;san&quot;"
                (onSearch)="searchPorts($event)"
                (onChange)="portChange($event)">
            </select-searchable>
        </ion-item>
  1. Next, create a function which will communicate with your server. In the example below I use setTimeout to simulate an AJAX request to the server. In your case you need to use Angular2 HTTP service (https://angular.io/tutorial/toh-pt6). You also need a back-end which can return data from Firebase.
    searchPorts(event: { component: SelectSearchable, text: string }) {
        let text = (event.text || '').trim().toLowerCase();

        if (!text) {
            event.component.items = [];
            return;
        } else if (event.text.length < 3) {
            return;
        }

        event.component.isSearching = true;

        // Simulate AJAX.
        setTimeout(() => {
            event.component.items = this.getPorts().filter(port => {
                return port.name.toLowerCase().indexOf(text) !== -1 ||
                    port.country.toLowerCase().indexOf(text) !== -1;
            });

            event.component.isSearching = false;
        }, 2000);
    }

The code above in cation can be found here http://plnkr.co/edit/YzCBKS?p=preview


#40

Thank you very much for the help