Angular 2/4 自动完成搜索框
Posted
技术标签:
【中文标题】Angular 2/4 自动完成搜索框【英文标题】:Angular 2/4 Autocomplete Search Box 【发布时间】:2018-12-12 11:56:01 【问题描述】:如何在 angular2/4 中创建下拉建议搜索框。在我的代码中输入搜索内容并单击搜索按钮,使用下面的代码显示详细信息。但是我在尝试在文本框中输入建议详细信息时需要显示。与自动完成相同(在搜索期间,将显示“as-you-type”建议。) (我看到很多人都在问同样的问题,但没有答案)
这样
O
OR
ORA
ORANG
ORANGE
组件.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>
组件.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)
【问题讨论】:
【参考方案1】:试试这个:
<input name="search"
class="form-control"
type="text"
placeholder="Search"
(keyup)="FetchItemDetailsSearch(searchcontent)"
[(ngModel)]="searchcontent">
【讨论】:
我有一个疑问?如何在结果中突出显示搜索到的关键词(我希望搜索到的关键词在搜索结果中以粗体显示)。 这个教程看起来不错:url以上是关于Angular 2/4 自动完成搜索框的主要内容,如果未能解决你的问题,请参考以下文章