Use search result

Ionic Framework Ionic Angular
1

Hello how are you doing? :grin:
I have a problem, I can’t find where I should continue.

It is a SearchBar with FormControl, I need to use the result hint to fill in the value of that FormControl.

Currently I get the results that come from the service (some simulated data for testing).

I need to capture the search result and leave it to later send that information and assign it to the user.
I leave my code here:


  public vehicleBrands: Array<VehicleBrand>;
  public vehicle: Vehicle;
   public brandControl = new FormControl ('', Validators.required);


const obs = this.brandControl.valueChanges.pipe(
        filter(text => text.length > 2),
        debounceTime(350),
        distinctUntilChanged(),
        switchMap((brandFilter) => this.refDataService.getVehicleBrands(brandFilter)))
        .subscribe( resp =>  this.vehicleBrands = resp);
          
        }

<ion-header>


</ion-header>

<ion-toolbar>
    <ion-searchbar placeholder=" Search Brand " type="text " [formControl]="brandControl "></ion-searchbar>
</ion-toolbar>

<ion-content>
    <ion-list>
        <ion-item *ngFor="let brand of vehicleBrands" [value]="brand" >
            <ion-label>{{ brand.name }}</ion-label>
            

            </ion-item>
        </ion-item>
    </ion-list>
</ion-content>

Kind Regards

2

I fixed it, now I get the result in the input, but the list doesn’t close. :crazy_face:

I hope that this time, it has helped you :upside_down_face:

3 
<ion-header>
    <ion-toolbar>
        <ion-title>
            Add Car
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-toolbar>
    <ion-searchbar placeholder=" Search Brand " type="text " [formControl]="brandControl " [value]="searchText"></ion-searchbar>
</ion-toolbar>

<ion-content>
    <ion-list>
        <ion-item *ngFor="let brand of vehicleBrands " (click)="searchText = brand.name">
            <ion-label>{{ brand.name }}</ion-label>
        </ion-item>
    </ion-list>
</ion-content>

public vehicleBrands: Array<VehicleBrand>;
   public vehicle: Vehicle;
   public brandControl = new FormControl ('', Validators.required);
   resp: any;
   searchText = '';
constructor(private fb: FormBuilder,private refDataService: ReferenceDataService,
    private usrService: UserService,
    private usrProfileGuardService: UserProfileGuardService,
    private authSrvc: AuthService, ) {
      
      
      
        const obs = this.brandControl.valueChanges.pipe(
        filter(text => text.length > 2),
        debounceTime(350),
        distinctUntilChanged(),
        switchMap((brandFilter) => this.refDataService.getVehicleBrands(brandFilter)))
        .subscribe( resp =>  this.vehicleBrands = resp);
          
        }