配置tags为true的Select2如何实现选中选项后始终保留placeholder？

问题根因 #

• 基于Select2 4.1.0-rc.0的原生逻辑，多选模式下的内联搜索框存在两类会导致placeholder消失的行为：
  1. 从下拉列表选中静态已有选项时，插件会主动清空搜索输入框的placeholder属性，不会保留自定义设置的内容
  2. 下拉面板打开、关闭触发组件重绘时，插件会重置输入框状态，覆盖手动设置的placeholder值
• 现有实现的额外问题：
  1. 在select2:select事件中，将设置placeholder的逻辑绑定在“搜索框处于聚焦状态”的判断分支内。实际操作中，点击下拉选项时焦点会临时转移到下拉面板，搜索框处于失焦状态，判断条件不成立，设置placeholder的代码完全不会执行，直接触发了原生的placeholder清空逻辑
  2. 代码存在选择器笔误：.select2-search.select2-search--.select2-search__field 多了冗余短横，无法匹配到目标元素，对应的样式调整逻辑完全无效
  3. 未覆盖组件重绘事件，无法拦截插件自动重置placeholder的行为

修正后代码 #

页面结构 #

<div class="container select-tags">
  <select class="add-tags" multiple="multiple">
    <option value="Red">Red</option>
    <option value="Yellow">Yellow</option>
    <option value="Green">Green</option>
    <option value="Blue" selected>Blue</option>
    <option value="Pink">Pink</option>
    <option value="Black">Black</option>
  </select>
</div>

注：按项目常规方式引入jQuery、对应版本Select2的JS与CSS依赖即可。

样式代码 #

select {
  width: 300px;
}
/* 强制placeholder正常显示，避免被原生样式隐藏透明度 */
.select2-search--inline .select2-search__field::placeholder {
  color: #999;
  opacity: 1;
}

交互代码 #

// 封装统一的placeholder设置方法，避免重复书写选择器逻辑
function setInlinePlaceholder($selectEl, text) {
  const $searchField = $selectEl
    .next(".select2-container")
    .find(".select2-search--inline .select2-search__field");
  $searchField.attr("placeholder", text);
}

// 初始化Select2实例
$("select.add-tags").select2({
  tags: true,
  dropdownParent: $(".select-tags"),
  placeholder: "Start typing the tag name..."
});

// 初始化完成后，根据已选值设置初始placeholder
const initialSelectedCount = $("select.add-tags").select2("data").length;
setInlinePlaceholder(
  $("select.add-tags"),
  initialSelectedCount > 0 ? "Add another tag" : "Start typing the tag name..."
);

// 选中选项事件处理
$("select.add-tags").on("select2:select", function (evt) {
  const $currentSelect = $(this);
  // 保留原有逻辑：将已选DOM元素移到列表末尾，避免下拉列表顺序混乱
  const $selectedOption = $(evt.params.data.element);
  $selectedOption.detach();
  $currentSelect.append($selectedOption);
  $currentSelect.trigger("change");

  // 移除原代码的聚焦判断，无论当前组件是否聚焦，都强制设置placeholder
  setInlinePlaceholder($currentSelect, "Add another tag");
  // 调整输入框宽度
  $currentSelect
    .next(".select2-container")
    .find(".select2-search--inline .select2-search__field")
    .css("width", "200px");
});

// 移除选项事件处理
$("select.add-tags").on("select2:unselect", function () {
  const $currentSelect = $(this);
  const selectedCount = ($currentSelect.val() || []).length;
  const placeholderText = selectedCount === 0 
    ? "Start typing the tag name..." 
    : "Add another tag";
  
  setInlinePlaceholder($currentSelect, placeholderText);
  // 修正原代码的选择器笔误，统一设置输入框宽度
  $currentSelect
    .next(".select2-container")
    .find(".select2-search--inline .select2-search__field")
    .css("width", selectedCount === 0 ? "100%" : "200px");
});

// 补充监听组件下拉面板打开、关闭的重绘事件，防止插件自动清空placeholder
$("select.add-tags").on("select2:open select2:close", function () {
  const $currentSelect = $(this);
  const selectedCount = ($currentSelect.val() || []).length;
  const placeholderText = selectedCount === 0 
    ? "Start typing the tag name..." 
    : "Add another tag";
  setInlinePlaceholder($currentSelect, placeholderText);
});

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