我是Angular的新手。我如何在角度2/4中开发一个下拉建议搜索框。当单击搜索按钮时,详细信息将使用以下代码显示。但是,我正在尝试在文本框中键入建议的详细信息。类似于“自动完成”(在搜索过程中,将显示“键入时”建议。)
组件。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 **
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
答案 0 :(得分:1)
请检查此答案
<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>
答案 1 :(得分:0)
看看角材料自动完成组件。
https://material.angular.io/components/autocomplete/examples。
您还可以拥有自己的自定义过滤器功能。下面的示例代码将为您提供实现这一目标的出路。 https://stackblitz.com/angular/krlrmgepmrv?file=app%2Fautocomplete-filter-example.ts
或 试试这个
http://www.angulartutorial.net/2017/03/simple-search-using-pipe-in-angular-2.html
答案 2 :(得分:0)
您可以使用this之类的自动完成插件。