如何实现ng-select2打开时搜索框自动获取焦点可直接搜索

实现方案 #

ng-select2本身没有提供自动聚焦搜索框的内置配置项，可以通过监听下拉框打开事件手动操作DOM实现，修改代码如下：

1. 修改HTML模板 #

给ng-select2组件添加模板引用标识和打开事件监听：

<ng-select2 
  #select2
  [(ngModel)]="AUEEquip"
  (ngModelChange)="filterrole()"
  (open)="onSelect2Open()"
  name="AUEEquip"
  [allowClear]=true
  [data]="equips"
  [options]="options"
  [placeholder]="'Please choose your equipment'"
  style="text-align: left;"
>
</ng-select2>

2. 修改TS逻辑 #

import { ViewChild } from '@angular/core';
import { NgSelect2Component } from 'ng-select2';

// 类内部代码
@ViewChild('select2') select2: NgSelect2Component;

options = {
  width: '100%',
  multiple: false,
  tags: false
};
equips: Select2OptionData[] = [];
AUEEquip: string = '0';

onSelect2Open() {
  // 加短延时等待下拉框内搜索框渲染完成
  setTimeout(() => {
    const searchInput = this.select2.selectionEl.nativeElement.querySelector('.select2-search__field');
    if (searchInput) {
      searchInput.focus();
    }
  }, 100);
}

注意事项 #

• setTimeout的延时是为了等待下拉框内部DOM渲染完成再查找搜索框，常规场景下100ms足够，如果你的下拉选项渲染数据量很大，可以适当调整到200ms以内，不会有明显感知
• 代码中.select2-search__field是ng-select2内置的搜索框固定类名，只要你没有修改组件的默认样式类，就可以直接使用

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