我是 Angular 的新手.我如何开发一个 2/4 角的下拉建议搜索框.单击搜索按钮时，使用下面的代码显示详细信息.但我正在尝试在文本框中键入需要显示的建议详细信息.与自动完成相同(在搜索过程中，将显示as-you-type"建议.)
component.HTML
</表单>
</节><section class="CommonsubWhiteBg"style='height:850px;overflow-y:scroll;溢出-x:隐藏'(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>
</文章></ng-容器><ng-container *ngIf="!itemdetails" style="margin:0px;"><article class="col-md-12"><h3>正在加载数据...</h3></文章></ng-容器><ng-container *ngIf="itemdetails&&itemdetails.length==0"class="ItemNotfoundArea row" style="margin:0px;"><article class="col-md-12"><h1>对不起</h1><p>未找到项目</p></文章></ng-容器></节>
component.ts 文件
FetchItemDetailsSearch(itemcodeordesc: string): void {this.pageIndex = 1;this.searchflag = 1;if (itemcodeordesc.length > 0)this.searchcontent = itemcodeordesc;别的 {itemcodeordesc = 未定义this.searchcontent = itemcodeordesc;}this.prevScrollPosition = 0;this._enqService.FetchItemDetailsSearch(this.searchcontent, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,错误 =>{控制台错误(错误)；this.statusMessage ="服务有问题，请稍后重试";});}**Service.ts **
FetchItemDetailsSearch(itemcodeordesc: string, pageIndex: number):Observable{return this._http.get('http://localhost:1234/api/enquirydetails/',{参数:{ itemcodeordesc: itemcodeordesc,页索引:页索引 }}).map((response: Response) => <IEnquiryDetails[]>response.json()).catch(this.handleError)} 条件:仅尝试使用 Angular 4/2 而不是 jQuery
请检查这个答案
</表单>
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
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>
这篇关于如何使用angular 2/4开发搜索建议文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
