角度 2/4 搜索建议未显示在文本框中

Posted 2023-03-13

【中文标题】角度 2/4 搜索建议未显示在文本框中

【英文标题】：angular 2/4 search suggestion not showing in textbox

【发布时间】：2018-12-20 12:08:59

【问题描述】：

我正在开发一个 2/4 角的下拉建议搜索框。

到目前为止我做了什么：

当在文本框中输入并按下搜索按钮时，将显示搜索到的详细信息。

我想要达到的目标：

我想显示搜索，‘as-you-type’ 建议要显示（像下拉搜索）。

我尝试了其他类似的问题，但答案对我不起作用。

我安装了有角度的材料，但我的包中有一些错误。

我想要这样的东西

我尝试使用管道，但它不起作用。

HTML

<div class="form-group">
    <div class="input-group">
        <div [innerhtml]="highlighted"></div>
        <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>

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";
        );

我是这样的（这是问题，没有显示建议）

我尝试了从网上获得的严格方法，但没有一个能提供所需的输出。

这是我的包.json

"dependencies": 
    "@angular/common": "~4.3.4",
    "@angular/compiler": "~4.3.4",
    "@angular/core": "~4.3.4",
    "@angular/forms": "~4.3.4",
    "@angular/http": "~4.3.4",
    "@angular/platform-browser": "~4.3.4",
    "@angular/platform-browser-dynamic": "~4.3.4",
    "@angular/router": "~4.3.4",
    "angular-in-memory-web-api": "~0.3.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"

我也尝试this，但是没有成功。

【参考方案1】：

我只是猜测，因为您的数据返回到 observable 中。 所以在你的 html 中应该有一个管道 |在某处异步。 如果这不是问题，那么请提供您的template，您在哪里呈现this.itemdetails。（假设您的服务实际上也返回值）