ngBootstrap 捕获关于提前输入建议的点击事件

Question

当我键入 'ala' 时，它会在建议中显示 2 个州 'alabama' 和 'alaska '。现在我需要的是只要我点击 'alaska'/'alabama' 列表中的任何项目，它就应该调用我的方法

methodAbc(){
   //Some complex logic
   alert("Method called.");
}

示例代码linkclick here

我在文本框上尝试了模糊、聚焦等事件，但它们无法按我需要的方式工作。单击不触发项目选择它在我单击文本框内部时触发。

Answer 1

您只需要使用来自 ng-bootstrap 的 ngbTypeAhead API

的 selectItem 事件

<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" 
   [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter"
   (selectItem)="methodABC($event)" />

见updated sample code

ngBootstrap 捕获关于提前输入建议的点击事件

ngBootstrap Capture click event on typeahead suggestions

css

ng-bootstrap

angular6