如何顯示jQuery-ui自動完成在引導側導航？

Question

我想顯示一個jQuery-ui自動完成文本框在我的引導側導航欄上。我遇到的問題是自動完成列表顯示在導航欄後面。所以我的問題是我可以做出什麼樣的改變來實現上面的目標？ ui-autocomplete類的

<!-- Bootstrap Core CSS --> 
 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
 
<!-- Custom CSS --> 
 
<link href="css/simple-sidebar.css" rel="stylesheet"> 
 
<link href="includes/jquery-ui.css" rel="stylesheet"> 
 
     
 
<div id="sidebar-wrapper"> 
 
      <form> 
 
      <div class="input-group"> 
 
       <input type="text" class="form-control mr-sm-2" placeholder="Search" name="srch-term" id="srch-term"> 
 
       <div class="input-group-btn"> 
 
        <button class="btn btn-success" type="submit">Search</i></button> 
 
       </div> 
 
      </div> 
 
     </form> 
 

 
    <ul class="sidebar-nav"> 
 
     <img src="images/me.jpg" style="width:100%; clear:both;" /> 
 
     <li class="sidebar-brand"> 
 
      <a href="#">Home</a> 
 
     </li> 
 

 
     <li> 
 
      <a href="#">Project</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Overview</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Events</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Services</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<!-- /#sidebar-wrapper --> 
 

 
<!-- Page Content --> 
 
<div id="page-content-wrapper"> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><img src="images/hamburger_icon.png" width="20px" height="20px"/></a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<!-- /#page-content-wrapper --> 
 
</div> 
 
<!-- /#wrapper --> 
 
<!-- jQuery --> 
 
<script src="js/jquery.js"></script> 
 
<script src="includes/jquery-ui.js"></script> 
 
<!-- Bootstrap Core JavaScript --> 
 
<script src="js/bootstrap.min.js"></script> 
 
<!-- Menu Toggle Script --> 
 
<script> 
 
    var availableTags = [ 
 
<?php 
 
$rows = getSkills($conn); 
 
$count=0; 
 
$rowcount=$rows->num_rows; 
 
foreach ($rows as $row) { 
 
    $count++; 
 
    if ($rowcount>$count){ 
 
     echo "'{$row['Skill']}',";   
 
    } 
 
    else 
 
    { 
 
     echo "'{$row['Skill']}'";   
 
    } 
 
}?>]; 
 
    $("#srch-term").autocomplete({ 
 
\t source: availableTags 
 
}); 
 
    $("#wrapper").toggleClass("toggled"); 
 
    $("#menu-toggle").click(function (e) { 
 
     e.preventDefault(); 
 
     $("#wrapper").toggleClass("toggled"); 
 
    }); 
 
</script>

Answer 1

增加z索引。