угловое окно поиска 2/4, как Google - PullRequest
Новая
       33

угловое окно поиска 2/4, как Google

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

Привет, я новичок в угловой 2 / 4. Мне нужно выделить слово, в котором был произведен поиск, при отображении результата (искомое ключевое слово будет выделено жирным шрифтом в результатах поиска). И во время поиска будет отображаться предложение «по мере ввода». Как это изображение Google здесь .

это мой Component.ts 

 DetailsSearch(itemcode: string): void {

    this.searchflag = 1;
    this.pageIndex = 1;
    this.prevScrollPosition = 0;
    if (itemcode.length > 0) {
        this.searchcontent = itemcode;

    }
    else {
        itemcode = undefined;
        this.searchcontent = itemcode;
    }


    this._Service.DetailsSearch(this.searchcontent,  this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
        error => {
            console.error(error);
            this.statusMessage = "Problem with the service.Please try again after sometime";
        });
}

это мой HTML 

 <form role="form">  
        <div class="row">
            <div class="form-group">
                <div class="input-group">
                    <input class="form-control" type="text" name="search" placeholder="Search" required="" [(ngModel)]='searchcontent'>
                    <span class="input-group-btn">
                        <button class="btn btn-danger ProductSearchBtn" type="button" (click)='DetailsSearch(searchcontent)'><i class="glyphicon glyphicon-search" aria-hidden="true"></i><span style="margin-;">Search</span></button>
                    </span>
                </div>
            </div>          
        </div>
    </form>

Ответы [ 2 ]

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

Вы можете использовать компонент автозаполнения Angular Material, чтобы сделать это легко: https://material.angular.io/components/autocomplete/examples

Приведенные здесь примеры очень хороши для начала.

Затем, чтобы выделить искомый текст, вы можете использовать канал в промежутке, который показывает текст. Если я использую автозаполнение материала в качестве примера, оно будет выглядеть так: 

<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
  <span [innerHTML]="state.name | highlightSearch:stateCtrl.value"></span>
</mat-option>

С трубой: 

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

@Pipe({
  name: 'highlightSearch'
})
export class HighlightSearchPipe implements PipeTransform {

  transform(value: string, search: string): string {
    return value.replace(new RegExp('(?![^&;]+;)(?!<[^<>]*)(' + search + ')(?![^<>]*>)(?![^&;]+;)', 'gi'), '<strong class="your-class">$1</strong>');
  }

}

Канал будет печатать набранный текст жирным шрифтом и применять любой класс CSS в вашем классе.

Я уверен, что есть лучшие решения. Это сработало для меня. Надеюсь, это поможет!

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

Если вы хотите создать поиск типа вперед в угловых, попробуйте использовать реактивную форму 

<form class="form-inline">
  <div class="form-group">
    <input type="search"
           class="form-control"
           (keypup)="doSearch"
           placeholder="Enter search string"
           [formControl]="searchField">
  </div>
</form>

Проверьте ниже блог https://codecraft.tv/courses/angular/http/http-with-observables/

...