Dropdown is not showing HTML , CSS - html

Question

I have the attr data-toggle= dropdown on the {{form.query}} which is the search input
but it just wont show, any solutions?
bootstrap/jquery links in head section :
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/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>
JavaScript in body :
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
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"> Django</li>
<div class="dropdown-divider"></div>
<li role="presentation"> Potato</li>
<div class="dropdown-divider"></div>
<li role="presentation"> Sleep</li>
</ul>
<input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">
</form>

Answer 1

Can you please check the below code link? Hope it will work for you. You have to add
id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" in input
and
aria-labelledby="dropdownMenuButton" in dropdown-menu
as per bootstrap documentation
Please refer to this link:
https://jsfiddle.net/yudizsolutions/8fnw0o46/11/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<form class="dropdown" method="get">
<input type="text" name="query" class="form-control" placeholder="Type Here" data-toggle="dropdown" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" required id="id_query">
<ul class="dropdown-menu col-12 pl-2" role="menu" aria-labelledby="dropdownMenuButton" id="list">
<li role="presentation"> Django</li>
<div class="dropdown-divider"></div>
<li role="presentation"> Potato</li>
<div class="dropdown-divider"></div>
<li role="presentation"> Sleep</li>
</ul>
<input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">
</form>

Answer 2

You must use ether a link or a button to toggle the dropdown, not a text input.
Wrap the dropdown’s toggle (your button or link) and the dropdown menu
within .dropdown, or another element that declares position:
relative;. Dropdowns can be triggered from <a> or <button> elements to
better fit your potential needs.
https://getbootstrap.com/docs/4.6/components/dropdowns/#examples