Angular autocomplete dropdown

Question

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)

For now, I did this:

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;
     });
   }

 }

dopoto · Accepted Answer · 2022-01-20 11:28:34Z

2

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.

answered Jan 20, 2022 at 11:28

dopoto

1,2741 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

devZ Over a year ago

For now I just want to implement filtering. Now I display all values. I need to implement filter but don't know how

dopoto Over a year ago

Filtering is possible with ng-select as well: you start off with an empty list, then do a custom server-side search and populate your list with matches whenever the users type something. See ng-select.github.io/ng-select#/search > Custom server-side search.

devZ Over a year ago

I solved it that way. Thank you for your answer.

Collectives™ on Stack Overflow

Angular autocomplete dropdown

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related