I am having trouble displaying the dropdown with the attribute data-toggle=dropdown on the search input field {{form.query}}.
Do you have any solutions?
Here are the Bootstrap and jQuery links in the head section :
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1948f918f918cc3c4d5c090">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
And here is the JavaScript in the body :
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6c7f6e5e2b302e302e337c7b6a7f2f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"gt;</script>
Here is the HTML code:
<form class="dropdown" method="get">
<input type="text" name="query" class="form-control" placeholder="Type Here" data-toggle="dropdown" required id="id_query">
<ul class="dropdown-menu col-12 pl-2" role="menu" aria-labelledby="menu" id="list" style="display:inline-block;">
<li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Django</a></li>
<div class="dropdown-divider"></div>
<li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Potato</a></li>
<div class="dropdown-divider"></div>
<li role="presentation"> <a href=&wuit;#" role="menuitem" tabindex="-1">Sleep</a></li>
</ul>
<input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">
</form>