Django select2 не отображается

Я пытаюсь добавить Select2 в мое приложение django, но не могу его использовать. Когда я нажимаю на поле для выполнения поиска, поиск не появляется, поэтому он не работает. Есть ли у кого-нибудь решение, чтобы я мог использовать его в своем приложении?

======== Page.html ========

{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<title>THE PAGE</title>

</head>

<link rel="icon" type="image/x-icon" href="{% static 'images/icons10.png' %}">

<body>
{%  include 'accounts/navbar.html' %}
<div class="container-fluid">
{% block content %}



{% endblock %}

</div>
<hr>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"> 
</script>
<script>
$(document).ready(function() {
  $('#id_employe').select2();
});

</script>
<!-- Footer -->
<footer class="page-footer font-small blue">

<!-- Copyright -->
<div class="footer-copyright text-center py-3">© {% now "Y" %}
<h7>PAGE</h7>
</div>

</footer>
<!-- Footer -->
</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>

Это страница формы.

============ Страница form.html =========

{%  extends 'accounts/page.html' %}

{% load crispy_forms_tags %}

{% load static %}

{% block content %}

<br>

<h3>ADD INFO</h3>
<div class="row">
   <div class="col-md-12">
        <div class="card card-body">

            <form action="" method="POST">
                {% csrf_token %}
                {{forms|crispy}}
        
                <input class="btn btn-primary" type="submit" value="Ajouter" name="Ajouter">

            </form>
        </div>
    </div>
</div>

{% endblock %}

ScreenSHot

Вернуться на верх