javascript - 如何将自定义 HTML 添加到 ngx Typeahead？

Question

就像 Google 搜索在 typeahead 下拉列表底部有两个按钮一样，我如何向 ngxTypeahead 下拉列表添加一些 html ？

<div class="row">
      <div class="col-sm-12">
        <div class="flex-grow-1 form-group business-classification">
          <div class="input-group">
            <div class="input-group-prepend form-control pl-0 pt-0 reorder-1 flex-grow-1 position-relative ">
              <!-- <span class="m-0 pt-4"><i class="material-icons md-18">search</i></span> -->
              <span class="label position-absolute">Business Classification<sup class="text-danger">*</sup></span>
              <input type="search" [value]="query" ngxTypeahead class="col-sm-12 form-control p-0 m-0 pl-3 no-brad border-0 bg-transparent pt-2" [taUrl]="url" [taApi]="api" [taItemTpl]="itemTpl" (taSelected)="handleHttpResultSelected($event)">
            </div>
          </div>

          <ng-template #itemTpl let-result>
            <div>{{ result.result.classification }}</div>
            <div class="ml-auto small text-secondary pl-5">SIC {{ result.result.sicCode }}</div>
          </ng-template>
        </div>
      </div>
    </div>

Answer 1

您可以使用自定义模板来获取结果，并在末尾添加所需的按钮

类似这样的:

<ng-template #rt let-r="result" let-t="term">
  <ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
  <button>Save</button>
  <button>Cancel</button>
</ng-template>

<label for="typeahead-template">Search for a state:</label>
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
  [inputFormatter]="formatter" />
<hr>

引用:https://ng-bootstrap.github.io/#/components/typeahead/examples#template