How to develop search suggestion text box using an

Question

I'am new in Angular. How can i develop a drop down suggestion search box in angular 2/4. when 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.)

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>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
<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 file

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

condition: trying only with Angular 4/2 not jQuery

Answer 1

Please check this answer

   <form role="form">
            <div class="row">
                <div class="form-group">
                    <div class="input-group">
                        <input name="search" class="form-control" type="text" placeholder="Search" (keyup)="FetchItemDetailsSearch(searchcontent)" [(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>
                    </div>
                </div>
            </div>
        </form>

Answer 2

Take a look at angular material auto complete component.

https://material.angular.io/components/autocomplete/examples.

You can also have your own custom filter function. Below sample code would give you a way out to achieve the same. https://stackblitz.com/angular/krlrmgepmrv?file=app%2Fautocomplete-filter-example.ts

or Try this

http://www.angulartutorial.net/2017/03/simple-search-using-pipe-in-angular-2.html

Answer 3

You can use auto complete plugin like this .