隐藏在 Bootstrap 导航栏后面的 jQuery 自动完成建议框

【问题标题】：jQuery autocomplete suggestion box hidden behind Bootstrap Nav bar隐藏在 Bootstrap 导航栏后面的 jQuery 自动完成建议框
【发布时间】：2017-11-20 17:51:31
【问题描述】：

我正在使用 Bootstrap 4 主题，并在其中添加了一个 jQuery 自动完成搜索框。我遇到的问题是建议框的顶部显示在导航栏后面。我怎样才能把它拉到最前沿？这是该问题的一个工作示例：https://jsfiddle.net/phenkels/dwhzdg7b/11/。以及 HTML 代码的 sn-p：

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">DASHBOARD</a>
    </div>

    <!-- Start Search Bar -->
    <div class="ui-widget nav navbar-nav" id="search-wrapper">
      <div class="input-group ">
        <input id="tags" placeholder="Search..." autocomplete=off>
      </div>
    </div>
    <!-- End Search Bar -->

  </nav>
</body>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

添加这个 CSS 会增加z-index:

#ui-id-1 {z-index: 9999;}

小提琴：https://jsfiddle.net/7z7Lj6pw/

预览

【讨论】：

你能告诉我它在哪里绑定吗？我看到它有效，但不明白为什么
@Phillip 这是因为，自动建议列表没有设置z-index，并且由于它是绝对定位的，缺少z-index 使其默认为0，而引导程序的导航栏通常具有较高值的z-index。因此问题。
@Phillip 如果您需要更多说明，请告诉我。很高兴为您提供帮助...
当然。我只是想了解#ui-id-1 的来源，因为它在 jsfiddle 中工作，但我无法在我的应用程序中复制它。看起来好像是从 ui-widget 类自动创建的，你能确认一下吗？
没关系，我可以让它在我的应用程序中运行。谢谢！