如何使用卡片而不是下拉菜单来显示结果? NgbTypeAhead

时间:2018-07-02 17:57:07

标签: html angular typeahead ng-bootstrap bootstrap-typeahead

我有一个自动完成搜索栏,使用预先输入的引导程序和角度,如下所示:enter image description here

但是我宁愿将下拉菜单更改为一个单独的容器,该容器在搜索栏下方的两列中包含卡片列表作为建议,而不是下拉菜单。

<form class="search_issue" style="width: 1000px;">
      <ng-template #rt let-r="result" let-t="term">
        <div class="row" style="width: 1000px;">
          <div class="col-sm-6">
            <div class="card" style="width: 100%;">
              <div class="card-body">
                <a id="search_label"><i>{{r.type }}</i></a> &ensp; {{ r.name}}
               </div>
             </div>
           </div>
         </div>
       </ng-template>

      <input id="typeahead-template" placeholder="Search for your issue/request/project/platform/team/application" type="text" class="typeahead form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" name="Search" />
       <button type="submit" (click)="redirect(model)"><i class="fa fa-search"></i></button>

     </form>

我该如何一起摆脱下拉菜单并自定义我自己的建议容器?我对Angular和Bootstrap很陌生,所以我不确定该怎么做。我曾尝试查找如何执行此操作,但未找到有关如何使用ngbTypeahead摆脱下拉菜单的任何内容。任何有关这样做的链接将不胜感激。一旦获得所需的格式,我将更改所有样式属性,因此style=""语句可以忽略。

也许可以使用resultTemplate吗?

0 个答案:

没有答案