Angular项目中点击ng-multiselect-dropdown自动聚焦筛选输入框

ng-multiselect-dropdown本身没有内置自动聚焦筛选框的配置项，我们可以通过监听下拉框打开事件结合DOM操作实现需求：

步骤1：修改模板代码 #

给组件添加模板引用变量，并绑定onOpen事件（下拉框展开时触发）：

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

步骤2：实现聚焦逻辑 #

在组件TS文件中添加聚焦函数，通过DOM查询找到筛选输入框并触发聚焦：

// 导入必要模块
import { Component } from '@angular/core';

@Component({
  // 组件元数据
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 已有的配置项
  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',
  };

  // 聚焦筛选输入框的方法
  focusSearchInput(dropdown: any) {
    // 延迟执行确保下拉框DOM已渲染完成
    setTimeout(() => {
      // 筛选输入框的类名为ng-input-filter，可根据组件实际DOM结构调整
      const searchInput = dropdown.elementRef.nativeElement.querySelector('.ng-input-filter');
      if (searchInput) {
        searchInput.focus();
      }
    }, 100);
  }

  // 已有的业务方法
  updateCompanyList(event: any) { /* 你的业务逻辑 */ }
  onItemSelect(event: any) { /* 你的业务逻辑 */ }
}

注意事项 #

• setTimeout的延迟时间可根据页面渲染速度调整，确保DOM元素已生成
• 如果ng-input-filter类名无效，可通过浏览器开发者工具查看筛选输入框的实际类名或DOM选择器，替换查询语句即可
• 确保allowSearchFilter配置为true（你的代码中已绑定this.ShowFilter，保证该值为true即可生效）

内容的提问来源于stack exchange，提问作者JackTheRealPi