带有下拉建议的自定义引导表单输入

Question

我正在尝试创建一个表单，该表单将在焦点上显示用户先前搜索的下拉列表。但是，我遇到了标记 html/css 以使其看起来像我想要的问题。

我希望下拉建议直接出现在输入框下方，即与输入框对齐并且输入框和建议之间的间距为零。

您可以看到我在此 JSFiddle 尝试中遇到的问题，其中建议包含在导航栏之后。

body {
    margin: 10px;
}

.navbar-container {
    display: flex;
    align-items: center;
}

.d-flex {
    display: flex;
    align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse bg-inverse">
  <div class="container navbar-container">
    <a class="navbar-brand" href="#">
      <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
    </a>
    <form class="form-inline d-flex">
      <input class="form-control form-control-sm" type="text" placeholder="Search" id="menu1" data-toggle="dropdown">
      <button class="btn btn-outline-success btn-sm" type="submit">Go</button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
        <div class="dropdown-divider"></div>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
        <div class="dropdown-divider"></div>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      </ul>
    </form>
  </div>
</nav>

Answer 1

只需确保表单具有 .dropdown 类，因为它是 .dropdown-menu 的父级。

https://www.codeply.com/go/ZJM3RKapo7

<nav class="navbar navbar-inverse bg-inverse">
    <div class="container navbar-container">
        <a class="navbar-brand" href="#">
            <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
        </a>
        <form class="form-inline d-flex dropdown">
            <input class="form-control form-control-sm" type="text" placeholder="Search" id="menu1" data-toggle="dropdown">
            <button class="btn btn-outline-success btn-sm" type="submit">Go</button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
                <div class="dropdown-divider"></div>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
                <div class="dropdown-divider"></div>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
            </ul>
        </form>
    </div>
</nav>

此外，如果您升级到 4.0.0，您将不需要额外的 flexbox 类。

Answer 2

看看 HTML 数据列表元素[1]

body
{
    width: 100%;
    height: 100%;
    background-color: #1e1e1e;
    color: white;
    overflow: hidden;
}

.grd-row
{
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

.datalist-picker
{
    border-radius: 0 .25rem .25rem 0;
    width: 24px;
    align-items: baseline;
    white-space: nowrap;
    background-color: #e9ecef;
    background-repeat: no-repeat;
    background-size: 16px 14px;
    background-position-y: 60%;
    background-position-x: 50%;
    margin-left:-24px;
}

.arrow-down-picker
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.datalist-group
{
    margin:0;
    position: relative;
    display: flex;
    white-space: nowrap;
    align-items: baseline;
    width: 100%;
    gap: 6px;
}

@media screen and (max-width: 999px)
{
    .datalist-group
    {
        position: relative;
        display: block;
    }
}

.datalist-group-input
{
    margin: 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    gap: 0px;
}

.datalist-input
{
    margin: 0;
    display: block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    background-image: linear-gradient(to right, #fff calc(100% - 23px), transparent 23px);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: .2rem;

}

    .datalist-input:focus
    {
        color: #212529;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

input::-webkit-calendar-picker-indicator
{
    opacity: 0;
}

<div style="width:75%; margin:9% 0 0 25%;">
    <div style="margin:0 auto;">
        <div class="ctrl-row" style="width:50%;">
            <div style="margin:18% 18% 1% 18%;">
                <div class="datalist-group">
                    <div for="ac-ad-cam-tit">Label</div>
                    <div class="datalist-group-input">
                        <input class="datalist-input" list="lst-autocomplete" placeholder="Placeholder text">
                        <i class="datalist-picker arrow-down-picker"></i>
                    </div>
                </div>
                <datalist id="lst-autocomplete">
                    <option value="Sun"></option>
                    <option value="Saturn"></option>
                    <option value="Jupiter"></option>
                    <option value="Mars"></option>
                    <option value="Neptune"></option>
                    <option value="Venus"></option>
                </datalist>
            </div>
        </div>
    </div>
</div>