Bootstrap 如何添加引导搜索栏功能

wqlqzqxt  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(2)|浏览(167)

我在我的网站上设置了一个导航栏,我在导航栏的右边设置了一个搜索栏,见下面的代码

<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand text-danger" href="index.php">Network TV</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapsible">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#section1">Home</a></li>
                <li><a href="#section2">Top rated</a></li>
                <li><a href="#section3">Most Popular by Genre</a></li>
                <li><a href="#section4">Music</a></li>
                <li><a href="#section5">Suggestions</a></li>
                <li id="adminpanel"><a href="admin/data_display.php">Admin control panel</a></li>
                <li>&nbsp;</li>
                        <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>
            </ul>
        </div>
    </div>
  </div>
</nav>

我想知道我如何使它这样当用户键入信息到搜索栏的结果将显示在一个引导模式。例如,他们键入'电影'一个电影模式将弹出与电影的名称在它。这里是一个近距离看搜索栏

<div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>
vxqlmq5t

vxqlmq5t1#

这取决于你打算如何获取数据。如果我没猜错的话,你只需要向某个电影数据库发出POST/GET请求。看起来像是php,也许是WordPress/Drupal,所以我猜这是一个MySQL请求。
这是一个来自PHP学院的(免费的)教程,Alex是一个很好的导师.
PHPAcademy视频:https://www.youtube.com/watch?v=Yb3c-HljFro
干杯。

jhkqcmku

jhkqcmku2#

<div class="container h-100">
 <form method="POST" action="jq.php">
  <div class="d-flex justify-content-center h-100">
   <div class="searchbar">
      <input class="search_input" type="text" name="" placeholder="Search...">
      <a href="#" class="search_icon"><i class="fas fa-search"></i></a>
    </div>
  </div>
  </form>
</div>

相关问题