javascript 如何使select2搜索框“内联”?

gz5pxeao  于 2023-02-28  发布在  Java
关注(0)|答案(4)|浏览(173)

我正在从Twitter的typeahead.js迁移到select2。
我非常喜欢typeahead.js的一点是所选值和搜索框出现在同一个字段中,您可以在here中尝试一下。
我希望在select2中实现同样的功能,您会注意到在select2中,“当前选择的值”与搜索框的位置不同。

我怎样才能使它成为相同的元素呢?

rqmkfv5c

rqmkfv5c1#

至少现在是在线的...

$(document).ready(function() {
    $('select').select2();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

    Inline:
    <select>
      <option value="Pizza">Pizza</option>
      <option value="Burger">Burger</option>
      <option value="Sugar">Sugar</option>
    </select>
    indeed!

但是!如果你使用bootstrap你必须使表单内联。只要添加类form-inline到表单。我必须这样做才能使它内联...

bd1hkmkf

bd1hkmkf2#

祸从心头来,一切都简单多了

.select2-container--open .select2-dropdown--below {
  position: relative;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  position: absolute;
  top: -27px;
  border: 0px !important;
  width: 94%;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
  outline: -webkit-focus-ring-color auto 0px;
}
jexiocij

jexiocij3#

您使用了多个Html属性:
例如:用于引导CSS和引导脚本
用于引导选择CSS和脚本
用于最新查询版本
编写下拉代码

<select class="selectpicker" data-live-search="true" multiple>
  <option data-tokens="ketchup mustard">Hot</option>
  <option data-tokens="mustard">Burger</option>
  <option data-tokens="frosting">Sugar</option>
</select>

例如:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

    <select class="selectpicker"  multiple>
      <option data-tokens="Pizza">Pizza</option>
      <option data-tokens="Burger">Burger</option>
      <option data-tokens="Sugar">Sugar</option>
    </select>
wn9m85ua

wn9m85ua4#

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

<select class="selectpicker" data-live-search="true" multiple>
  <option data-tokens="ketchup mustard">Hot</option>
  <option data-tokens="mustard">Burger</option>
  <option data-tokens="frosting">Sugar</option>
</select>

验证码:

相关问题