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

Question

我在我的网站上设置了一个导航栏，我在导航栏的右侧设置了一个搜索栏，请参见下面的代码

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

Answer 1

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

Answer 2

这取决于您计划如何获取数据。如果我说得对，您只是希望向某些电影数据库发出 POST/GET 请求。看起来像 php，可能是 Wordpress/Drupal，所以猜测它是 MySQL 请求。

这是 PHP Academy 的（免费）教程，Alex 是一位很好的导师。

PHPAcademy 视频： https://www.youtube.com/watch?v=Yb3c-HljFro

干杯。