Я хотел бы создать поле ввода для поиска и фильтрации.Одна из старых страниц начальной загрузки демонстрирует именно то, что я хочу, но у меня возникают некоторые проблемы при отображении результатов.
Пример страницы начальной загрузки Поиск в верхнем правом углу - это то, что я ищу
Я извлек необходимые элементы и построил простую форму, и вот скрипка.Варианты результатов поиска не отображаются вообще.Если я удаляю класс css из выпадающего меню, результаты поиска отображаются, но они остаются такими же.Я хотел бы, чтобы они отображались динамически при поиске соответствующего текста.
Кроме того, как отображать эти результаты, не нажимая элементы управления под результатами вниз.
.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>
Изображение, поясняющее мой вопрос для большей ясности.