selectize.js 多下拉输入位置

问题描述

我试图将搜索输入作为多选 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/

解决方法

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

我聚焦输入并在第一个选项中添加选择的属性。

selectized[0].selectize.focus();