CODEWITHSUNDEEP
angularbootstrap-4dropdownangular-ui-bootstrapangular-bootstrap
devZ
devZ

Reputation: 726

Angular autocomplete dropdown

I want to create an input field with autocomplete. So when I write in the input field it displays me as dropdown values from the database. Ideally, it should be with angular material but I can't get that working right. Because I need something like this: (the letters which I write should get different colors in the list)

enter image description here

For now, I did this: enter image description here

When I refresh the page it displays by default. so my autocomplete doesn't work.

HTML

  <form class="mt-4 mb-4">
            <mdb-form-control class="d-flex align-items-center">
                <input mdbInput type="text" list="joblistOptions" class="form-control" name="text"/>
                <button class="btn btn-primary submit" type="submit"><i class="fa fa-search"></i></button>
                <label mdbLabel class="form-label" for="text">Vpišite poklic, o katerem bi želeli izvedeti več</label>

            </mdb-form-control>
            <div class="autocomplete-dropdown">
                <ul class="autocomplete-item-list">
                    <li class="autocomplete-item" *ngFor="let job of testJobs" >{{ job.nadnaslov }}</li>
                </ul>
            </div>
        </form>

And my typescript file

import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Subscription } from 'rxjs';
 import { Job } from 'src/app/models/Job';
 import { JobsService } from 'src/app/services/jobs.service';
 import { Subject } from 'rxjs';


 @Component({
   selector: 'app-search',
   templateUrl: './search.component.html',
   styleUrls: ['./search.component.scss']
 })

 export class SearchComponent implements OnInit {

   testJobs: any;

   showSearchIcon: boolean = true;
   jobs: Job[] = [];

   private jobsSubs: Subscription = new Subscription();

   constructor(private jobsService: JobsService) { }

   ngOnInit(): void {
     this.getAllJobs();
   }

   onDeleteText () {

   }

   getAllJobs() {
     this.jobsService.getJobs().subscribe((response: any) => {
       this.testJobs = response;
     });
   }

 }

Upvotes: 0

Views: 8480

Answers (1)

dopoto
dopoto

Reputation: 1264

Wouldn't it be easier for you to just use an existing component such as https://github.com/ng-select/ng-select?

Highlighting matches is already implemented: https://ng-select.github.io/ng-select#/templates > Custom optgroup template.

Upvotes: 2

Related Questions