angular 2/4 search box like google

Question

Hi i am new in angular 2/4.I Need to highlight the word that is been searched, while displaying the result (the key word searched will be in bold in the search results). And During searching, ‘as-you-type’ suggestion to be displayed.Like This Google image here.

this is my 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";
        });
}

this is my 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>

Answer 1

If you want to create Type ahead Search in angular try to use reactive form

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

Check the below Blog https://codecraft.tv/courses/angular/http/http-with-observables/

Answer 2

You could use Angular Material Autocomplete component to do this easily: https://material.angular.io/components/autocomplete/examples

The examples there are quite good to get you started.

Then to highlight the text being searched, you could use a pipe in the span that shows the text. If I use the Material Autocomplete as an example, it would look like this:

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

With the pipe:

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

}

The pipe will put the typed text in bold and apply whatever css is in 'your-class'.

I'm sure there are better solutions out there. This worked for me. Hope this helps !