title: How to add functionality a bootstrap search bar
body: <p>I have a navigation bar set up on my website, I have set up a search bar towards the right of the navigation bar, see code below</p>
  
  <pre><code>    &lt;nav class="navbar navbar-trans navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand text-danger" href="index.php"&gt;Network TV&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse" id="navbar-collapsible"&gt;
              &lt;ul class="nav navbar-nav navbar-left"&gt;
                  &lt;li&gt;&lt;a href="#section1"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#section2"&gt;Top rated&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#section3"&gt;Most Popular by Genre&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#section4"&gt;Music&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#section5"&gt;Suggestions&lt;/a&gt;&lt;/li&gt;
                  &lt;li id="adminpanel"&gt;&lt;a href="admin/data_display.php"&gt;Admin control panel&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&amp;nbsp;&lt;/li&gt;
                          &lt;div class="col-sm-3 col-md-3 pull-right"&gt;
          &lt;form class="navbar-form" role="search"&gt;
          &lt;div class="input-group"&gt;
              &lt;input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"&gt;
              &lt;div class="input-group-btn"&gt;
                  &lt;button class="btn btn-default" type="submit"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/form&gt;
          &lt;/div&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I am wondering how do I make it so when the user types information into the search bar the results will be displayed in a bootstrap modal. for example they type 'Movies' a movies modal will pop up with name of movies in it. Here is a close up look of the search bar </p>
  
  <pre><code> &lt;div class="col-sm-3 col-md-3 pull-right"&gt;
          &lt;form class="navbar-form" role="search"&gt;
          &lt;div class="input-group"&gt;
              &lt;input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"&gt;
              &lt;div class="input-group-btn"&gt;
                  &lt;button class="btn btn-default" type="submit"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/form&gt;
          &lt;/div&gt;
  </code></pre>