如何从选择元素ID中获取select2的class .select2-search？

Question

鉴于与我互动的单个选择元素的id，我试图一直向下遍历以获取.select2-search的类select2来在我的函数中使用它，但是没有运气。

function hideSelect2Keyboard(ID) {
  var Select2Search = $('#' + ID).prev().find('.select2-drop').find('.select2-search');

  console.log(Select2Search);

  $(Select2Search + ' input, :focus,input').prop('focus', false).blur();
}

$("select").select2().on("select2-open select2-close", function() {
  var ID = $(this).attr('id');
  hideSelect2Keyboard(ID);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>


<label for="Salutation">Salutation:</label>
<select class="" name="" id="Salutation">
  <option value="Mrs">Mrs</option>
  <option value="Mr">Mr</option>
  <option value="Miss">Miss</option>
</select>

<label for="Gender">Gender:</label>
<select class="" name="" id="Gender">
  <option value="Female">Female</option>
  <option value="Male">Male</option>
  <option value="Transgender">Transgender</option>
</select>

控制台没有错误，但我无法获得类.select2-search。我在这样的控制台节目中尝试了上面的查询

将select元素转换为select2后的html结构如下：

这意味着我具有选择元素ID #Salutation，从这里我希望获得类.select2-search。

这是怎么回事，如何从给定的选择ID中获得类.select2-search？谢谢。

Answer 1

Select2有一个名为 dropdownCssClass 的选项，如果您在此处为每个选择指定一个唯一值，则select2呈现的html的父div将具有此CSS类，因此您可以访问它并在其中查找元素轻松地，我将代码更改为这样

<label for="Salutation">Salutation:</label>
<select class="" name="" id="Salutation" data-selector='salutation'>
 <option value="Mrs">Mrs</option>
 <option value="Mr">Mr</option>
 <option value="Miss">Miss</option>
</select>

<label for="Gender">Gender:</label>
<select class="" name="" id="Gender" data-selector='salutation'>
 <option value="Female">Female</option>
 <option value="Male">Male</option>
 <option value="Transgender">Transgender</option>
</select>

请注意，我为每个选择添加了一个数据属性，然后可以在您的初始化代码中执行此操作

$("select").each(function(){
  var selector = $(this).data('selector')
  $(this).select2({
    dropdownCssClass: selector
  }).on("select2-open select2-close", function() {
    hideSelect2Keyboard(selector);
  });
});

现在，每个呈现的选择将具有指定类的父级 现在您可以在其中选择一个查找内容

var yourDiv = $('.salutation').find('.select2-search')