selectize.js 多下拉输入位置答案

【问题标题】：selectize.js multi drop down input locationselectize.js 多下拉输入位置
【发布时间】：2021-09-29 23:54:04
【问题描述】：

我试图将搜索输入作为多选 div 中的第一个元素。我尝试过操纵 DOM，也只使用 CSS。

我可以先显示输入，下面是选定的选项，但这似乎破坏了删除标签的功能，我必须点击每个两次。

$(document).ready(function() {
  let selectize = $("#mySelect").selectize({
    searchField: ["text", "value"],
    plugins: ["remove_button"]
  });
});

.selectize-input {
  display: flex !important;
  flex-direction: column;
}

.selectize-input>div {
  order: 2;
}

.selectize-input>input {
  order: 1;
}

.selectize-control.multi .selectize-input>div {
  width: 100%;
  text-align: left;
}

.selectize-control.single .selectize-input::after {
  right: 5px !important;
}

.selectize-control.plugin-remove_button .item {
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap4.min.css" integrity="sha512-MMojOrCQrqLg4Iarid2YMYyZ7pzjPeXKRvhW9nZqLo6kPBBTuvNET9DBVWptAo/Q20Fy11EIHM5ig4WlIrJfQw==" crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" integrity="sha512-bkB9w//jjNUnYbUpATZQCJu2khobZXvLP5GZ8jhltg7P/dghIrTaSJ7B/zdlBUT0W/LXGZ7FfCIqNvXjWKqCYA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js" integrity="sha512-pF+DNRwavWMukUv/LyzDyDMn8U2uvqYQdJN0Zvilr6DDo/56xPDZdDoyPDYZRSL4aOKO/FGKXTpzDyQJ8je8Qw==" crossorigin="anonymous"></script>

<div style="width:200px;">
  <select id="mySelect" multiple>
    <option value='A'>Value A</option>
    <option value='B'>Value B</option>
    <option value='C'>Value C</option>
    <option value='D'>Value D</option>
    <option value='E'>Value E</option>
    <option value='F'>Value F</option>
  </select>
</div>

这是我尝试使用 CSS 的一个小技巧：https://jsfiddle.net/josborne71/r8h3ze7m/58/

【问题讨论】：

标签： jquery css selectize.js

【解决方案1】：

喜欢吗？ https://jsfiddle.net/nhojfv0m/61/

我专注于输入并添加在第一个选项上选择的 attr。

selectized[0].selectize.focus();

【讨论】：

谢谢，但我希望搜索输入位于所选标签上方。这与默认功能没有任何不同。
喜欢吗？ jsfiddle.net/d5c928ye/3@JasonO 我在父元素上插入显示 flex，列反转。
我试过了，但正如问题中所述，这会破坏选项的删除，因为您必须单击每个选项两次才能将其删除。