How to add functionality a bootstrap search bar

Question

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

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

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

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

I kinda figured that out thank you, are you aware of what javascript I would need? — Oliver Ketley, Jul 12 '15 at 13:46
Nope...you would have to do some research on that, collecting the input data,comparing it to your database and outputting the result using ajax I guess. — Paulie_D, Jul 12 '15 at 13:50
Okay thanks for that, would it be easier if i created a database with movies and details about them, then exported them to a php page in rows and had it search through them on the webpage rather than referring backwards and forwards to the server database, im super new to programming, so please excuse me if this is totally wrong :P — Oliver Ketley, Jul 12 '15 at 13:52
Thanks mate, il have a bit more research and if I don't figure it out ill leave it for a week or so and work on the rest of the site. — Oliver Ketley, Jul 12 '15 at 14:00

score 0 · Answer 1 · answered Jul 12 '15 at 13:58

0

This depends on how you are planning to grab the data. If I have it right, you're looking to just make a POST/GET request to some database for Movies. Looks like php, maybe Wordpress/Drupal, so guessing it'd be a MySQL request.

Here's a (free) tutorial from PHP Academy, Alex is a good tutor.

PHPAcademy Video: https://www.youtube.com/watch?v=Yb3c-HljFro

Cheers.

answered Jul 12 '15 at 13:58

leocreatini

676
1
9
18

wow thats a massive help, thanks. How would i store the videos in the database? is this possible? – Oliver Ketley Jul 12 '15 at 13:59
Videos tend to be stored in file systems/cloud (Amazon S3), or in sites like YouTube/Vimeo because they're massive files. You can store it in databases as BLOB (Binary Object). That's going to be more learning, and still not great for large files (> 50-100mb). – leocreatini Jul 12 '15 at 14:02
Okay, this site is just a local site for my home network, so the files will he hosted on a local server. so would I just refer to the files form the files system on the server such as /movies/'moviesname.mp4' – Oliver Ketley Jul 12 '15 at 14:03
Yeah, I don't have direct experience with that, however, it does seem like it'd be possible putting that in the Here's another similar post that might help: http://stackoverflow.com/questions/18670728/how-to-embed-video-using-html5-with-local-file – leocreatini Jul 12 '15 at 14:07
Thanks, I already have everything set up for the site including the videos and linking them to other pages, I just need a way for the user to search for the name of the movies and be transferred to that movies php page. The site is fully up and running – Oliver Ketley Jul 12 '15 at 14:09
It sure is, but now i just need to do some sort of search function, so when the user types 'Insurgent' they are redirected to Insurgent.php hmm seems so hard – Oliver Ketley Jul 12 '15 at 14:17

score 0 · Answer 2 · answered Jun 25 '19 at 04:36

0

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

answered Jun 25 '19 at 04:36

Paari Dhanush

1
2

3

Welcome to stack overflow, it can be useful to explain your answer for the benefit of all that view this page now and in the future. – Dessus Jun 25 '19 at 04:44

How to add functionality a bootstrap search bar

2 Answers2