角度自动完成下拉菜单

Question

我想创建一个带有自动完成功能的输入字段。因此，当我在输入字段中写入时，它会将我显示为数据库中的下拉值。 理想情况下，它应该使用有棱角的材料，但我无法正常工作。因为我需要这样的东西： （我写的字母应该在列表中得到不同的颜色）

现在，我这样做了：

当我刷新页面时，它默认显示。所以我的自动完成功能不起作用。

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>

还有我的打字稿文件

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

 }

Answer 1

使用现有的组件，例如https://github.com/ng-select/ng-select，不是更容易吗？

高亮匹配已经实现：https://ng-select.github.io/ng-select#/templates > 自定义 optgroup 模板。