javascript - 实现了自定义预输入，需要额外的功能

Question

我在 Angular 中创建了自定义预输入。查看代码 here

我必须在这里再添加两个功能，但我不知道如何实现。

1. 当用户开始输入并显示选项时，显示选项中的匹配字符应该是不同的颜色，比如蓝色或红色

2. 现在我可以通过鼠标单击来从显示的菜单中选择选项，我还想添加用于导航和键盘选择的选项。

请告知我如何继续实现上述这些功能。

Answer 1

对于第一个功能，您可以执行如下操作:

使用以下代码创建一个 highlight.pipe.ts 文件:

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({ name: 'highlight' }) export class HighlightPipe implements PipeTransform {   transform(text: string, search): string {
    if (search && text) {
      let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
      pattern = pattern.split(' ').filter((t) => {
        return t.length > 0;
      }).join('|');
      const regex = new RegExp(pattern, 'gi');

      return text.replace(regex, (match) => `<span class="search-highlight">${match}</span>`);
    } else {
      return text;
    }   } }

在 app.module.ts 中注入(inject)这个管道

import { HighlightPipe } from './highlight.pipe';

更新您的应用组件

<div class="parent">
    <div>
        <h5>Sample Custom Typeahead</h5>
        <p>Try typing "Win" or "Mob" in input box below</p>
        <input type="text" [(ngModel)]="searchByThis" (keyup)="showDropdown()">
    </div>
    <div>
        <div (clickOutside)="closeDropDown()">
            <div class='search-drop-down' *ngIf="displayDropdown">

                <div (click)='selectValue(product)' class='search-results' *ngFor="let product of sampleItemDetails | searchFilter: searchByThis ">

                    <div [innerHTML]="product.name  | highlight : searchByThis">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

不要忘记更新您的 CSS:app.component.css

:host ::ng-deep .search-highlight{
  background-color: #F2E366;
}

我已经提到了这个gist