Question

我有一个使用PrimeNG组件的Angular 2应用程序。

用户界面包含自动完成组件，其中多选（p-autoComplete）类似于the documentation中的组件：

<p-autoComplete [(ngModel)]="countries" 
                [suggestions]="filteredCountriesMultiple" 
                (completeMethod)="filterCountryMultiple($event)" 
                [minLength]="1" 
                placeholder="Countries" 
                field="name" 
                [multiple]="true">
</p-autoComplete>

唯一的区别是，在我的情况下，输入字段具有固定的尺寸和滚动条。

问题：

每当我从自动完成列表的中间删除一个元素时，它会将焦点移动到输入字段的底部。它看起来像这样：

这对用户来说非常烦人，尤其是当有多个字段需要删除时。

问题：如何在删除元素后强制滚动停留在同一位置？

如何重现：

更具体地说，您可以通过添加下一个css

来重现该问题

max-width: 150px;
max-height: 100px;
overflow-y: auto;

使用浏览器控制台直接在documentation page进入ui-autocomplete-multiple-container.ui-inputtext css类。

更新我设法通过使用以下代码在组件中设置onUnselect方法来获取滚动条位置：

onUnselect(event: any) {
    document.querySelector("div.my-input-class").scrollTop
}

更新2：我设法让它发挥作用

解决方案是onUnselect和onFocus事件处理程序的组合。

首先。我将最后一个滚动条位置保存到onUnselect调用中的字段中。

二。我在onFocus调用期间将此值设置为指定的元素。

相应的代码如下所示：

scrollPosition: number = 0;

onUnselect(event: any) {
    let input = document.querySelector("div.my-input-class");
    this.scrollPosition = input.scrollTop;
}

onFocus(event: any) {
    let input = document.querySelector("div.my-input-class");
    input.scrollTop = this.scrollPosition;
}

效果很好，可能这将是最终的解决方案。

但是我不喜欢它。如果PrimeNG的人在他们的组件中嵌入这样一个有用的功能会好得多。对我而言，奇怪为什么它不是开箱即用的。

如果您找到更好的解决方案，请提出建议。

Answer 1

您应该使用onFocus事件来处理与下面相同的事件，

<p-autoComplete [(ngModel)]="countries" 
                [suggestions]="filteredCountriesMultiple"                     
                (completeMethod)="filterCountryMultiple($event)" 
                styleClass="width12" (onFocus)="onFocus($event)">

  ....


onFocus(event){
      window.scrollTo(0, 0);

}

<强> LIVE DEMO

Answer 2

onUnselect(event: any) {
    // get index of the removed element
    // get total options count
    // get height of the element that contains the options
    // divide the height by number of options
    // set scroll potion to the result of division multiplied by the index
   document.querySelector('.ui-autocomplete-multiple-container.ui-inputtext').scrollTop = calculatedValue; 
}

Angular：自动填充字段在删除项目后更改焦点

2 个答案: