如何在引导侧导航顶部显示 jQuery-ui 自动完成？

Posted 2023-05-08

【中文标题】如何在引导侧导航顶部显示 jQuery-ui 自动完成？

【英文标题】：How To Display jQuery-ui Auto Complete on top of bootstrap side nav?

【发布时间】：2017-08-20 23:14:37

【问题描述】：

我试图在我的引导侧导航栏顶部显示一个 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"  /></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>

【问题讨论】：

尝试将您的自动搜索表单包装在 标记中，然后将该搜索表单容器的 style z-index 属性增加到高于导航栏的位置。

【参考方案1】：

增加ui-autocomplete 类的z-index。

【讨论】：

像魅力一样工作！谢谢。