我在我的ANGLING项目中使用了ng-Multiselect-Dropdown包(https://www.npmjs.com/package/ng-multiselect-dropdown).一切正常,但我想在打开多选下拉菜单时自动聚焦筛选器输入字段.

以下是我的html代码:

<div class="input-group" style="display: flex">
                <span class="input-group-text"><i class="fas fa-building"></i></span>
                <ng-multiselect-dropdown style="flex: 1"
                                         [placeholder]="'Unternehmen'"
                                         [data]="this.companies"
                                         [formControl]="filterCompany"
                                         [settings]="dropdownSettingsCompanies"
                                         (onFilterChange)="updateCompanyList($event)"
                                         (onSelect)="onItemSelect($event)">
                </ng-multiselect-dropdown>
</div>

以下是我对多选的设置:

dropdownSettingsCompanies: any = {
        singleSelection: false,
        idField: 'id',
        textField: 'name',
        showSelectedItemsAtTop: true,
        clearSearchFilter: true,
        allowSearchFilter: this.ShowFilter,
        enableCheckAll: false,
        allowRemoteDataSearch: true,
        searchPlaceholderText: 'Bitte geben Sie einen Suchbegriff ein',
    };

推荐答案

该项目内部没有此功能,您需要编写自己的方式.我使用了一个指令,并使用querySelector获取了输入元素,并集中了输入!

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appFocusOnClick]',
})
export class FocusOnClickDirective {
  constructor(private elementRef: ElementRef) {}

  @HostListener('click', ['$event.target'])
  onClick(btn) {
    console.log('button', btn, 'number of clicks:');
    const input = this.elementRef.nativeElement.querySelector(
      '.filter-textbox > input'
    );
    if (input) {
      input.focus();
    }
  }
}

stackblitz

Javascript相关问答推荐

将本机导航路由react 到导航栏中未列出的屏幕?

使用Java脚本导入gltf场景并创建边界框

用JS从平面文件构建树形 struct 的JSON

将Node.js包发布到GitHub包-错误ENEEDAUTH

同一类的所有div';S的模式窗口

当标题被点击时,如何使内容出现在另一个div上?

AddEventListner,按键事件不工作

Node.js API-queryAll()中的MarkLogic数据移动

将Auth0用户对象存储在nextjs类型脚本的Reaction上下文中

MongoDB通过数字或字符串过滤列表

表单数据中未定义的数组键

连续添加promise 时,如何在所有promise 都已结算时解除加载覆盖

使用Library chart.js在一个带有两个y轴的图表中绘制两个数据集

浮动标签效果移除时,所需的也被移除

如何使用Reaction/Redux创建购物车逻辑?

如何在chartjs-plugin-data Labels v2.1.0插件中设置照片?

在脚本设置中使用Vue3 v-html,无需额外的换行标记

如何在屏幕上显示时使用Java脚本和jQuery应用排序幻灯片动画

如何在应用内Chromium浏览器中启用通知模块?(未捕获ReferenceError:未定义通知)

我如何判断css@layer是否在css和Javascript中受支持?