Angular 2/4 Autocomplete Search Box

Question

How can I create a drop down suggestion search box in angular2/4. In my code enter the searchcontent and clicking on search button the details are shown using below codes.But am trying while typing on text box the suggestion details need to show. same like Auto complete (During searching, ‘as-you-type’ suggestion to be displayed.) (I saw so many peoples are asking same question but there is no answers)

Like this

O
OR
ORA
ORANG
ORANGE

Component.HTML

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

(And here i use a Scroll event in search)

 <section class="CommonsubWhiteBg" 
 style='height:850px;overflow-y:scroll; overflow-x:hidden' 
 (scroll)="onScroll($event)">
    <ng-container *ngFor="let item of itemdetails;">
        <article class="row" style="margin:0px;">
            <div class="col-md-12 col-sm-12 col-xs-12 EnquiryMore">
                <a [routerLink]="['/productdetails',item.ItemID]">
                    <h5>{{item.ItemCode + ' - ' + item.ItemDescription}}</h5>
                </a>
            </div>
        </article>
    </ng-container>
    <ng-container *ngIf="!itemdetails" style="margin:0px;">
        <article class="col-md-12">
            <h3>Loading data...</h3>
        </article>
    </ng-container>
    <ng-container *ngIf="itemdetails&&itemdetails.length==0" 
        class="ItemNotfoundArea row" style="margin:0px;">
        <article class="col-md-12">
            <h1>Sorry</h1>
            <p>Item Not Found</p>
        </article>
    </ng-container>
</section>

component.TS

FetchItemDetailsSearch(itemcodeordesc: string): void {
this.pageIndex = 1;
this.searchflag = 1;
if (itemcodeordesc.length > 0)
    this.searchcontent = itemcodeordesc;
else {
    itemcodeordesc = undefined
    this.searchcontent = itemcodeordesc;
}
this.prevScrollPosition = 0;        
this._enqService
    .FetchItemDetailsSearch(this.searchcontent, this.pageIndex)
        .subscribe(itemsData => this.itemdetails = itemsData,
            error => {
                console.error(error);
                this.statusMessage = 
                    "Problem with the service.Please try again after sometime";
            }
        );
    }

service.ts

 FetchItemDetailsSearch(itemcodeordesc: string, pageIndex: number): 
      Observable<IEnquiryDetails[]> {
        return this._http.get('http://localhost:1234/api/enquirydetails/', 
            { params: 
                { itemcodeordesc: itemcodeordesc, 
                  pageIndex: pageIndex } 
            })
        .map((response: Response) => <IEnquiryDetails[]>response.json())
        .catch(this.handleError)
    }

Answer 1

Try this:

<input name="search" 
       class="form-control" 
       type="text" 
       placeholder="Search" 
       (keyup)="FetchItemDetailsSearch(searchcontent)" 
       [(ngModel)]="searchcontent">