jQuery autocomplete suggestion box hidden behind Bootstrap Nav bar

问题

I'm using the Bootstrap 4 theme and I've added a jQuery autocomplete search box to it. The problem I'm having though is the top of the suggest box is showing up behind the nav bar. How can I pull this to forefront? Here's the a working example of the problem: https://jsfiddle.net/phenkels/dwhzdg7b/11/. And a snippet of the HTML code:

<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>