My goal is to create a search and filter user input field. I found an example on an old bootstrap page that showcases exactly what I need, but I'm facing some issues with displaying the results.
Here's the Bootstrap example page. The search bar on the top right side is exactly what I want.
I have extracted the necessary elements and built a simple form which you can view in this fiddle. However, the search result choices are not being displayed at all. If I remove the dropdown-menu CSS class, the search results are shown, but they remain static. What I am looking for is for them to appear dynamically as I search for matching text.
Additionally, I need help on how to display these results without pushing the controls below down.
.bd-search-results {
right: 0;
display: block;
padding: 0;
overflow: hidden;
font-size: 0.9rem;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
float: left;
min-width: 10rem;
margin: 0.125rem 0 0;
color: #292b2c;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.dropdown-item {
display: block;
width: 100%;
padding: 3px 1.5rem;
clear: both;
font-weight: 400;
color: #292b2c;
text-align: inherit;
white-space: nowrap;
background: 0 0;
border: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<form class="bd-search hidden-sm-down">
<input type="text" class="form-control" id="search-input" placeholder="Search..." autocomplete="off" />
<div class="dropdown-menu bd-search-results" id="search-results">
<a class="dropdown-item" href="/components/navbar/">Navbar</a>
<a class="dropdown-item" href="/components/navs/">Navs</a>
</div>
<br />
<input type="text" class="form-control" id="search-input" placeholder="Another text field..." autocomplete="off" />
</form>For better clarity, here is an image explaining my question: Image Link