How to get a specific value from array of object when using Autocomplete


#1

I strated to create a simple autocomplete form using angular material, and Autocomplete options does not work properly. I just want to show and search country names and when selecting a country the value it returns should be dial_code. but when i searching for countries it doesn’t filter like in the image shown below. what should i do ?

home.html

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option.name">
        {{ option.name }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormControl } from '@angular/forms';


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

  constructor(public navCtrl: NavController) {
  }
     myControl = new FormControl();
     countries = [{
          name: "United States",
          dial_code: "+1",
          code: "US"
        }, {
          name: "Israel",
          dial_code: "+972",
          code: "IL"
        }, {
          name: "Afghanistan",
          dial_code: "+93",
          code: "AF"
        }, {
          name: "Albania",
          dial_code: "+355",
          code: "AL"
        }, {
          name: "Algeria",
          dial_code: "+213",
          code: "DZ"
        }];
}

Untitled


#2

Your question is poorly phrased and your code is incomplete.
Please provide proper indentation for your code. Also post your complete code, if you are not able to ask a specific question, so that we can extrapolate your problem and still help you :slight_smile:

Last but not least google all the words you didn’t understand in this message.


#3

sorry for the trouble, this was my first post. i didnt noticed the options. anyway, i edited the question.


#4

Ah I see now I understand. Look at my code from this post. You can learn how to use ngModel from that one.

And specifically for your problem what you want to do is make a <ion-list> with an *ngIf decorator, that listens to your input. If you input is not blank, you want to render the list. Within the list you want to use an *ngFor to iterate through all your values (in your case country names) and see whether they match the string in your input in some way. If they do, render them with a (click) event that triggers the logic you want to happen when the user chooses a value.


#5

thanks for your help!


#6
////////////////////////////app.module.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'search_country',
  pure: true
})
export class SearchCountryPipe implements PipeTransform {
  
    transform(items: any[], args: string): any[] {
		console.log(items);
		if(args !== undefined){       
			args = args.toUpperCase();
			return items.filter(item => {
			  return item.name.toUpperCase().indexOf(args) !== -1 || item.code.toUpperCase().indexOf(args) !== -1

			});
		}
    }
}
@NgModule({
    declarations: [
	    SearchCountryPipe
    ]
})


/////////////////////////TS file

import { Component } from '@angular/core';
export class AddPatientPage {
	term: string = '';
	countries:any = [];
	countries_list:any = [];
	consultingdoctor:any;
	
	constructor(public navCtrl: NavController) {
		
		this.countries = [{
          name: "United States",
          dial_code: "+1",
          code: "US"
        }, {
          name: "Israel",
          dial_code: "+972",
          code: "IL"
        }, {
          name: "Afghanistan",
          dial_code: "+93",
          code: "AF"
        }, {
          name: "Albania",
          dial_code: "+355",
          code: "AL"
        }, {
          name: "Algeria",
          dial_code: "+213",
          code: "DZ"
        }];
		
		this.countries_list = this.countries;
	}
	
	searchFn(ev: any) {
		this.term = ev.target.value;
	}
}
  
////////////////////////HTML file
<ion-item>
	<ion-input type="text" [(ngModel)]="consultingdoctor" placeholder="Consulting Doctor" 
	    name="consultingdoctor" (input)="searchFn($event);" required></ion-input>
</ion-item>

<div *ngIf="term!=''" style="position: absolute;z-index: 99;width: 100%;padding-left:10px;padding-right:10px;" >
    <ion-list >
		<ion-item *ngFor="let item of countries_list | search_country: term" (click)="selectedItem(item)" style="background: #488aff;">
		    <h3 style="color:#fff !important;">{{item.name}} {{item.code}}</h3>
		</ion-item>
    </ion-list>
</div>