New component request: ionic-combobox

@xlegs wrote:

I'm looking for a combobox component in Ionic. It's essentially a form element that combines ion-input and ionic-searchbar. I've implemented it to a certain extent using ionic-searchbar, but I'm having difficulty making it look like ionic-input and making it a formControl.

Here's the HTML:

<ion-searchbar (ionInput)="search($event)" [(ngModel)]="searchString" debounce=1000></ion-searchbar>

<ion-list class="results" *ngIf="showResults">
  <ion-item *ngFor="let item of items" (click)="set(item)">
  	<ion-thumbnail item-left>
      <img src="assets/logos/{{item.key.toLowerCase()}}.svg">
    </ion-thumbnail>
    {{item.key}} - {{item.value}}
  </ion-item>
</ion-list>

Here's the TypeScript:

export class AirlineSearch implements OnInit {

  data: any;
  promise:any;
  public items: any;
  public searchString: string;
  public showResults: boolean;

  constructor(private nav: NavController, navParams: NavParams, private airlineCodes: AirlineCodes) {
  		this.showResults = false;
  }

  ngOnInit(): void {
  	this.airlineCodes.load().then(res => this.data = res);
  }

  set(item) {
  	this.searchString = item.key + ' - ' + item.value;
  	this.showResults = false;
  }

  search(ev: any) {
  	// set val to the value of the searchbar
    let val = this.searchString;

    if (val && val.trim() == '') {
      this.showResults = false;
    }

    let input: string = val.trim();

    this.items = this.data.filter(function (row) {
    	if (input.length < 2) {
    		return;
    	}

    	input = input.toLowerCase();
    	let str: string = null;

    	if (input.length == 2) {
    		str = row.key.toLowerCase();
    	}

    	if (input.length > 2) {
    		str = row.value.toLowerCase();
    	}

    	return str.includes(input);
    });

    if (this.items.length == 1) {
    	this.set(this.items[0]);
    }

    if (this.items.length > 1) {
    	this.showResults = true;
    }

  }

}

I think it would be useful to have a component where one can just write:

<ion-combobox (ionInput)="search($event)" [(ngModel)]="searchString" debounce=1000 formControlName="combobox"></ion-combobox>

Any thoughts?

Posts: 1

Participants: 1

Read full topic