Question

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

然而这打破了远程数据链接，因此我搜索时得到的只是用于下拉列表的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>

form.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年了，这个项目是我重新适应自己的方式！

谢谢

使用Select2和Bootstrap样式的问题

0 个答案: