Symfony表单中Tom-Select选中项如何移至下拉列表顶部或中间？

针对Symfony表单中Tom-Select选中项展开下拉时位于末尾的问题，可以通过Tom-Select的onDropdownOpen事件回调，在下拉展开前重新排序选项，实现将选中项移到顶部或中间位置。

将选中项移到下拉列表顶部 #

在Tom-Select初始化时添加onDropdownOpen事件处理，移除选中项并插入到选项列表开头：

// 替换#your-select-id为你的表单select元素ID
const tomSelect = new TomSelect('#your-select-id', {
  // 保留你原有的Tom-Select配置（如autocomplete、create等）
  onDropdownOpen: function() {
    const selectedVal = this.getValue();
    if (!selectedVal) return;

    const selectedOpt = this.options[selectedVal];
    if (!selectedOpt) return;

    // 提取所有非选中选项，再将选中项插入开头
    const allOptions = Object.values(this.options);
    const filteredOpts = allOptions.filter(opt => opt.value !== selectedVal);
    filteredOpts.unshift(selectedOpt);

    // 更新选项集合并刷新下拉列表
    this.options = {};
    filteredOpts.forEach(opt => {
      this.options[opt.value] = opt;
    });
    this.refreshOptions(false);
  }
});

将选中项移到下拉列表中间 #

计算选项总数的中间位置，将选中项插入到该位置：

const tomSelect = new TomSelect('#your-select-id', {
  // 保留原配置
  onDropdownOpen: function() {
    const selectedVal = this.getValue();
    if (!selectedVal) return;

    const selectedOpt = this.options[selectedVal];
    if (!selectedOpt) return;

    const allOptions = Object.values(this.options);
    const filteredOpts = allOptions.filter(opt => opt.value !== selectedVal);
    const totalCount = filteredOpts.length;
    const middlePos = Math.floor(totalCount / 2); // 计算中间索引

    // 将选中项插入中间位置
    filteredOpts.splice(middlePos, 0, selectedOpt);

    // 更新选项集合并刷新
    this.options = {};
    filteredOpts.forEach(opt => {
      this.options[opt.value] = opt;
    });
    this.refreshOptions(false);
  }
});

注意事项 #

• refreshOptions(false)中的false表示不保留当前搜索过滤状态，若需保留可改为true。
• 确保Symfony表单正确渲染Tom-Select组件，若使用AutocompleteType，需在表单配置中启用Tom-Select，并保证JS/CSS资源加载顺序正确。

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