如何添加功能的引導搜索欄

我必須建立在我的網站上的導航欄，我已經設置了對導航欄右側的搜索欄，請參見下面如何添加功能的引導搜索欄

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

來源

2015-07-12 Oliver Ketley

這將需要JavaScript ... –

我有點想通了，謝謝，你知道我會需要什麼樣的JavaScript？ –

不...你必須做一些研究，收集輸入數據，將它與數據庫進行比較，並使用ajax輸出結果。 –

這取決於你如何計劃抓取數據。如果我確實是對的，那麼您只需要向電影的某個數據庫發出POST/GET請求。看起來像PHP，也許Wordpress/Drupal，所以猜測它會是一個MySQL請求。

這是來自PHP Academy的免費教程，Alex是一位很好的導師。

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

乾杯。

來源

2015-07-12 13:58:12 leocreatini

哇，這是一個巨大的幫助，謝謝。我如何將視頻存儲在數據庫中？這可能嗎？ –

視頻往往存儲在文件系統/雲（Amazon S3）中，或者存儲在YouTube/Vimeo等網站中，因爲它們是大量文件。您可以將它作爲BLOB（二進制對象）存儲在數據庫中。這將是更多的學習，對於大型文件（> 50-100mb）仍然不是很好。 – leocreatini

好的，這個網站只是我的家庭網絡的本地網站，所以這些文件將託管在本地服務器上。所以我只需要引用服務器上文件系統的文件，如/movies/'moviesname.mp4' –

如何添加功能的引導搜索欄

回答

相關問題