如何使用angular 2/4开发搜索建议文本框 [英] How to develop search suggestion text box using angular 2/4

问题描述

我是Angular的新手.我如何在角度2/4中开发一个下拉建议搜索框.单击搜索按钮时，详细信息将使用以下代码显示.但是，在文本框中键入内容时，尝试显示建议的详细信息.类似于自动完成"(在搜索过程中，将显示键入时"建议.)

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

组件.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文件

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 **

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

条件:仅尝试使用Angular 4/2而不使用jQuery

condition: trying only with Angular 4/2 not jQuery

推荐答案

请检查此答案

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

这篇关于如何使用angular 2/4开发搜索建议文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！