Question

我想建立一个搜索和过滤用户输入字段。其中一个旧的引导页面可以准确地演示我想要的内容，但显示结果时有些麻烦。

我已经提取了所需的元素并构建了一个简单的表单，这是小提琴。搜索结果选项完全不显示。如果我删除了下拉菜单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>

一幅解释我的问题的图片，以更加清晰。

Answer 1

我在引导程序4中也遇到了类似的问题，并通过添加旧的引导程序类和新的引导程序类解决了该问题。您应该尝试在HTML标记中添加class=“dropdown”和当前类。

引导搜索和过滤器输入控件

1 个答案: