如何在bootstrap侧面导航上显示jQuery-ui Auto Complete？

Question

我正在尝试在我的bootstrap侧导航栏上显示一个jQuery-ui自动完成文本框。我遇到的问题是自动完成列表显示在导航栏后面。所以我的问题是我可以做些什么改变才能继续前进？

<!-- 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({
	source: availableTags
});
    $("#wrapper").toggleClass("toggled");
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>

Answer 1

增加ui-autocomplete类的z-index。