javascript 如何使用PrimeNG自动完成启用(onSelect)事件处理程序首先运行并防止(onBlur)事件同时运行

fumotvh3 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(104)

我这里出了点状况我需要帮助。目前正在开发一个搜索自动完成功能，其中选项显示在组件中的预定义列表中。现在，我的p-autocomplete标签看起来是这样的：

<p-autoComplete [(ngModel)]="skills" [suggestions]="filteredSkillSuggestions"
           id="skills" name="skills" #skillList="ngModel" 
           (completeMethod)="search($event)"
           [dropdown]="false" 
           [unique]="true"
           [multiple]="true"
           (keyup)=onEnterClickEvent($event)
           (onBlur)="onOutsideClick($event)"
           placeholder="Eg. Java, Angular, Terraform" 
           class="w-full p-fluid" ></p-autoComplete>

现在，有一个场景我正在努力迎合。假设我是一个用户，在这个输入中手动输入文本，但由于某种原因，我的文本没有给予任何搜索建议。最后，我希望在关注标记之外的内容时能够将其包含在输入中。有一个onBlur事件可以帮助解决这个问题，所以我是这样处理的：

onOutsideClick(event: KeyboardEvent){
    let tokenInput = event.target as any
    if (tokenInput.value){
      this.skills.push(tokenInput.value)
      tokenInput.value = ""
    }
  }

这在一定程度上起作用，但注意沿着一个问题。当从搜索建议中进行选择时，它会在onSelect事件之前发出OnBlur事件。这反过来运行上面的代码，并将用户键入的手动输入和从搜索建议中选择的内容都包含到输入列表中。有没有一种方法可以让我先运行onSelect，然后在运行onSelect时完全忽略onBlur？任何其他变通方法都值得赞赏。
我已经按照this answer的建议尝试了setTimeout()

JavaScript

来源：https://stackoverflow.com/questions/76556245/how-do-i-enable-onselect-event-handler-to-run-first-and-prevent-onblur-event

1条答案

按热度按时间

ijnw1ujt1#

要实现在自动完成组件中侦听输入字段的模糊事件并在执行逻辑之前应用延迟的所需行为，可以执行以下步骤：
1.将模板引用添加到HTML文件中的自动完成组件：

<h5>Basic</h5>
<p-autoComplete
  [(ngModel)]="selectedCountry"
  [suggestions]="filteredCountries"
  (onSelect)="select($event)"
  (completeMethod)="filterCountry($event)"
  #autoRef   <!-- Template reference -->
  field="name"
  [minLength]="1"
></p-autoComplete>

1.在组件中导入AfterViewInit，并使用@viewChild读取自动完成组件：

import { AfterViewInit, ViewChild } from '@angular/core';
import { AutoComplete } from 'primeng/autocomplete';

export class YourComponent implements AfterViewInit {
  @ViewChild('autoRef') autoRef: AutoComplete;
  
  // Rest of your component code
}

1.在组件中实现AfterViewInit接口：

export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    this.catchBlurEvent();
  }

  // Rest of your component code
}

1.在组件中创建catchBlurEvent()函数。此函数监听自动完成组件中输入字段的模糊事件，使用RxJS delay()添加延迟，并订阅该事件：

import { fromEvent } from 'rxjs';
import { delay } from 'rxjs/operators';

export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    this.catchBlurEvent();
  }

  catchBlurEvent() {
    fromEvent(this.autoRef.inputEL.nativeElement, 'blur')
      .pipe(delay(100))
      .subscribe((event: FocusEvent) => {
        // Your logic here
      });
  }

  // Rest of your component code
}

在catchBlurEvent()函数中，fromEvent用于从自动完成组件中的输入字段的模糊事件创建可观察值。然后应用delay运算符以引入100毫秒的延迟。最后，订阅处理事件并执行所需的逻辑。
通过实现这些步骤，您可以侦听自动完成输入字段的模糊事件，并在执行逻辑之前应用延迟，而无需在HTML模板中使用(onBlur)。

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 如何使用PrimeNG自动完成启用(onSelect)事件处理程序首先运行并防止(onBlur)事件同时运行

1条答案

相关问题

热门标签

最新问答