输入不触发更改事件

Question

我有以下输入

<input
  id="{{options.elementId}}"
  #awesomplete
  class="c-awesomplete__input dropdown-input"
  [formControl]="control"
  [type]="customType"
  [label]="options.label"
  (click)="toggleDropdown()"
  (change)="changed($event)">

它使用了 awesomplete jquery 插件。当我 select 正在输入或写入一个值时，它不会触发更改事件。而且我不知道为什么，除非我在输入组件之外单击。如果我在输入外部单击，它将触发更改。但是我希望它在我 select 下拉列表中的值或我写了一些东西后触发。

  @ViewChild("awesomplete", {static: false}) public awesompleteRef: ElementRef;
  @Input() public control: FormControl;
  @Input() public options: IAwesompleteOptions;

  public awesomplete: Awesomplete;

  constructor() { }

  ngOnInit() {
    this.control.enable();
  }

  ngAfterViewInit() {
    this.awesomplete = new Awesomplete(this.awesompleteRef.nativeElement, this.options);

  }

  public toggleDropdown(): void {
    this.awesomplete.evaluate();
    this.awesomplete.open();
  }

  public clearText(): void {
    this.control.setValue("");
  }

  public changed($event): void {
    console.log("I've changed");
  }

Answer 1

要触发 "change" 事件，元素需要失去焦点，这就是为什么当您单击其他地方时它会起作用的原因。

为了执行您希望的操作，您需要将一个新的事件侦听器附加到您的组件。

这是该插件可用的事件列表：https://leaverou.github.io/awesomplete/#events

据我所知，您需要收听 awesomplete-select 或 awesomplete-selectcomplete 事件。

这是该页面的示例：

Awesomplete.$('.your-element').addEventListener("awesomplete-selectcomplete", function() {
    // Do something
});

输入不触发更改事件

Input not triggering change event

jquery

angular

input

jquery-plugins