selectize.js多下拉输入位置

aydmsdu9  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(354)

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

anauzrmj

anauzrmj1#

喜欢吗?https://jsfiddle.net/nhojfv0m/61/
我将重点放在输入上,并在第一个选项上添加所选的属性。 selectized[0].selectize.focus();

相关问题