Question

我在Angular中创建了一个自定义类型。查看代码here

我必须在这里再添加两个功能，但我无法弄清楚如何实现。

当用户开始输入并显示选项时，显示的选项中的匹配字符应该是不同的颜色，例如蓝色或红色
现在可以通过鼠标点击显示菜单中的选项，我想添加导航选项和键盘选择。

请告知我如何继续实施上述功能。

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中注入此管道

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

已实施自定义类型，需要其他功能

1 个答案: