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插件。当我选择或写入一个值时，它不会触发更改的事件。而且我不知道为什么，除非我在输入组件之外单击。如果在输入之外单击，它将触发更改。但是，我希望一旦从下拉列表中选择一个值或编写一些内容，它就会触发。

  @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

要触发“更改”事件，该元素需要失去焦点，因此为什么当您单击其他位置时该元素仍然起作用。

要执行您想做的事情，您需要在组件上附加一个新的事件侦听器。

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

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

以下是该页面的示例：

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

输入未触发更改事件

1 个答案: