реализован пользовательский ввод текста, требуется дополнительная функция - PullRequest
Новая
       7

реализован пользовательский ввод текста, требуется дополнительная функция

0 голосов
/ 05 июня 2018

Я создал пользовательский ввод текста в Angular.Оформить заказ код здесь

Я должен добавить еще две функции здесь, но я не могу понять, как реализовать.

  1. Когда пользовательначинает печатать, и отображаются опции, затем соответствующие символы из отображаемых опций должны быть другого цвета, скажем, синего или красного цвета

  2. Сейчас я могу выбрать опции из отображаемого меню, нажавна нем с помощью мыши, я хочу добавить опцию для навигации и выбора с клавиатуры также.

Пожалуйста, посоветуйте, как я могу приступить к реализации этих вышеупомянутых функций.

1 Ответ

0 голосов
/ 06 июня 2018

Для первой функции вы можете сделать что-то вроде следующего:

Создайте файл 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;
}

Я уже упоминал это * суть 1016 *

...