Ion-select with Searchbar


#102

Hi @jalalh14, I’ve added open(), close() methods and onOpen, onClose events 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.


#103

I added an updated live demo using StackBlitz as Plunker stopped working for me:
https://ionic-select-searchable-basic.stackblitz.io/

More demos will be added to documentation section on GitHub soon:
https://github.com/eakoriakin/ionic-select-searchable/wiki/Documentation


#105

Hi @eakoriakin, it works perfect. Thank you. Is it possible to disable an option(not Component) by click event?

Lets say: I have 2 drop-downs which uses same Object say “ports”. If I select one(or multiple) option(s) from 1st drop-down it should be disabled in 2nd drop-down. Means once items is selected from either of these 2 drop-downs, the selected items should be disabled in remaining drop-down. So that it can’t be selected again in other drop-down. Please help me in achieving this.

Thanks!


#106

Hey, it’s now possible with isItemEnabled option from 2.2.1.


#107

This disables the option on page Load. How will it be done to disable option in another drop-down on Click event for multi-select? I’m new to ionic.


#108

This function exectutes whenever something changes in your app, not only on page load. So what you need to do inside it is to check whether item has already been selected.


#109

Ok. Can you please let me know how to get the selected items from “portChange(event: { component: SelectSearchableComponent, value: any })” to “isItemEnabled(port: Port)” ?
And
check multiple values in this - return port.name !== ‘Tokai’;


#110

Hey, just check a property that you pass to ngModal it will have all selected items.


#111

Hi @eakoriakin, I had a work around but this is not working as expected and how to disable multiple items at a time. Loop is not working.

What I’m expecting is: if items in one drop-down is selected the same should be disabled in other drop-down and vice versa. If the items is un-selected should be available on other drop-down to select. Is it possible to do this with out localStorage?

Here is my code:

TS file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SelectSearchableComponent } from 'ionic-select-searchable';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';


class Port {
    public id: number;
    public name: string;
    //public disabled: boolean;
}

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

	ports: Port[];
    port: Port;
    port2: Port;
    feedbackForm: FormGroup;

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
  	this.ports = [
            { id: 1, name: 'Tokai' },
            { id: 2, name: 'Vladivostok' },
            { id: 3, name: 'Navlakhi' }
        ];

    this.feedbackForm = this.formBuilder.group({
            "menu_itms":["", Validators.required],
            "menu_itms2": ["",Validators.required]
        });

  }

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

  isItemEnabled(port: Port) {
  	//console.log('port.name - ' + port.name);
  	let a = localStorage.getItem('e1dis')
  	console.log('Port - E1 '+ a);
    //return port.name !== 'Tokai';
    console.log('Port - E1 '+ JSON.stringify(this.port));
    return port.name !== a;
  }
  isItemEnabled2(port: Port) {
  	//let a = this.port[0].name;
  	let a = localStorage.getItem('e2dis')
  	console.log('Port - E2 '+ a);
    return port.name !== a;
  }

  portChange(event: { component: SelectSearchableComponent, value: any }) {
    console.log('port:', event.value);
    let b = event.value;
    localStorage.setItem('e2dis', event.value[0].name)
    this.isItemEnabled2(b);
  }

  portChange2(event: { component: SelectSearchableComponent, value: any }) {
    let b = event.value;
    localStorage.setItem('e1dis', event.value[0].name)
    this.isItemEnabled2(b);

    /*for (var i=0; i<event.value.length; i++) {
    	localStorage.setItem('e1dis', event.value[i].name)
    	this.isItemEnabled2(b);
    }*/
  }

}

html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="feedbackForm">
  <ion-item>
    <select-searchable
        [(ngModel)]="port"
        [items]="ports"
        itemValueField="id"
        itemTextField="name"
        formControlName="menu_itms"
        [canSearch]="true"
        [isMultiple]="true"
        [isItemEnabled]="isItemEnabled"
        (onChange)="portChange($event)">
        <ng-template selectSearchableValueTemplate let-ports="value">
        <div class="select-searchable-value-item">
            {{formatPorts(ports)}}
        </div>
    </ng-template>
    </select-searchable>
  </ion-item>

  <ion-item>
    <select-searchable
        [(ngModel)]="port2"
        [items]="ports"
        itemValueField="id"
        itemTextField="name"
        formControlName="menu_itms2"
        [canSearch]="true"
        [isMultiple]="true"
        [isItemEnabled]="isItemEnabled2"
        (onChange)="portChange2($event)">
        <ng-template selectSearchableValueTemplate let-ports="value">
        <div class="select-searchable-value-item">
            {{formatPorts(ports)}}
        </div>
    </ng-template>
    </select-searchable>
  </ion-item>	
  </form>  

</ion-content>

#112

Hey, it seems like you are over-complicating things too much :slight_smile: I’ll show you how to do it a bit later.


#113

@eakoriakin Ok, I’m new to this technology :slight_smile: . Waiting for your solution.


#114

Hi, have a look at this demo.
You will need to update to 2.3.0 version first.


#115

Hi @eakoriakin, Thanks for the update, works as required.

Meanwhile, I tried something like remove the selected item from other dropdown and vice versa.

This may be useful to some one who had this requirement or you can integrate this feature to the component repo.

TS file:

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SelectSearchableComponent } from 'ionic-select-searchable';

class Port {
    public id: number;
    public name: string;
}


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

	ports: Port[];
	ports1: Port[];
	ports2: Port[];

  constructor(public navCtrl: NavController) {
  	this.ports = [
            { id: 1, name: 'One #1' },
            { id: 2, name: 'Two #2' },
            { id: 3, name: 'Three #3' },
            { id: 4, name: 'Four #4' },
            { id: 5, name: 'Five #5' },
            { id: 6, name: 'Six #6' },
        ];
    this.ports1 = this.ports;
    this.ports2 = this.ports;
  }

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

  onOpen1(event: { component: SelectSearchableComponent }){
  	event.component.items = this.ports1;
  }

  onOpen2(event: { component: SelectSearchableComponent }) {
    event.component.items = this.ports2;
  }

  portChange(event: { component: SelectSearchableComponent, value: any }) {

    this.ports2 = Object.assign([], this.ports);   
    
   	for (var i = event.value.length-1; i >= 0; --i) {	
	    for (var j = this.ports1.length-1; j >= 0; --j) {
	    	console.log(this.ports2)	    		    	
	    	if (event.value[i].id == this.ports1[j].id) {		    
		    	let index = this.ports2.findIndex(x => x.id == event.value[i].id);
		    	this.ports2.splice(index, 1);  
	    	}
	  	}
	  }

  }

  portChange2(event: { component: SelectSearchableComponent, value: any }) {   
    //console.log('Port1 ', this.ports2)
    this.ports1 = Object.assign([], this.ports);

    for (var k = event.value.length-1; k >= 0; --k) {
    	for (var l = this.ports2.length-1; l >= 0; --l) {
    		console.log(event.value[k].id, this.ports2[l])
    		if (event.value[k].id == this.ports2[l].id) {
    			let index = this.ports1.findIndex(y => y.id == event.value[k].id);
    			this.ports1.splice(index, 1);
    		}
    	}
    }
  }
}

HTML file

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form>
  <ion-item>
    <select-searchable        
        [items]="ports1"
        itemValueField="id"
        itemTextField="name"
        [canSearch]="true"
        [isMultiple]="true"
        (onOpen)="onOpen1($event)"
        (onChange)="portChange($event)">
        <ng-template selectSearchableValueTemplate let-ports="value">
        <div class="select-searchable-value-item">
            {{formatPorts(ports)}}
        </div>
    </ng-template>
    </select-searchable>
  </ion-item>

  <ion-item>
    <select-searchable        
        [items]="ports2"
        itemValueField="id"
        itemTextField="name"
        [canSearch]="true"
        [isMultiple]="true"        
        (onOpen)="onOpen2($event)"
        (onChange)="portChange2($event)">
        <ng-template selectSearchableValueTemplate let-ports="value">
        <div class="select-searchable-value-item">
            {{formatPorts(ports)}}
        </div>
    </ng-template>
    </select-searchable>
  </ion-item>	
  </form>  

</ion-content>

#116

Hey, I’m glad that I could help you :slightly_smiling_face:

Regarding removal of a selected item. This can easily be done by amending an array that is passed to ngModal.


#117

there is no components/select folder in plunker please confirm that


#118

Hey @mobitplus, ionic-select-searchable is now available as npm package.


#120

The description in the first messsage of the post is rather outdated and might be wrong as forum rules don’t allows me to edit it.
You no longer need to copy anything to /components folder. Just have a look at Getting started section of ionic-select-searchable.

Here is a working live demo at StackBlitz as well.


#121

how to put api value from the select searchable…?


#122

Check out the docs man, I’m sure you will find an answer there.


#123

Hello, I am using ion-searchable and it works like a charm. The only thing I noticed is I didn’t see an option for a selected or default value. Is there a function for this? or a workaround perhaps?

Thanks in advance.