使用 Select2 和 Bootstrap 样式的问题

Posted 2023-05-07

【中文标题】使用 Select2 和 Bootstrap 样式的问题

【英文标题】：Problems with using Select2 and Bootstrap styling

【发布时间】：2017-07-26 20:15:44

【问题描述】：

我正在尝试使用 Bootstrap 设置表单样式。我有一个 django-autocomplete-light 控件，它使用 Select2 并在后端查询数据库。

我尝试使用Bootstrap Select 2 theme

但是这会破坏远程数据链接，所以我在搜索时得到的只是下拉菜单的 Bootstrap 占位符。

以下是相关代码：

CSS / JS 声明

    <link href="/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />

<link href = "https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.6/select2-bootstrap.css" type = "text/css" media = "all" rel = "stylesheet" />
    <script type="text/javascript" src="% static 'admin/js/vendor/jquery/jquery.js' %"></script>
<script type="text/javascript" src="/static/collected/admin/js/vendor/jquery/jquery.js"></script>



<script type="text/javascript" src="/static/collected/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/collected/autocomplete_light/vendor/select2/dist/js/select2.full.js"></script>
<script type="text/javascript" src="/static/collected/autocomplete_light/forward.js"></script>

document.ready 中的 JQuery 代码

("#id_search").select2(theme:"bootstrap");

Django 模板中的代码

<div class="p-2" body style="margin: 0;">
     form.search.errors 
     form.search 
</div>

forms.py 中的代码

search = forms.ModelChoiceField(
    queryset=myobject.objects.all(),
    widget=autocomplete.ModelSelect2(url='my-autocomplete'), required = False
    )

最后是渲染的 html

<div class="p-2" body style="margin: 0;">

                            <select data-autocomplete-light-function="select2" data-autocomplete-light-url="/my-autocomplete/" id="id_search" name="search">
<option value="" selected="selected">---------</option>
</select>

                        </div>

请原谅我可怕的代码 - 离开网络开发游戏 15 年了，这个项目是我重新适应自己的方式！

谢谢

【问题讨论】：

你试过实现github.com/select2/select2-bootstrap-theme吗？

【参考方案1】：

尝试实现select2 with bootstrap3 不过，我认为最好使用 select2 并调整 CSS (select2.min.js) 并按原样使用 JS。