"Advanced Search Menu"
Bootstrap 4.0.0 Snippet by errorteam10

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <body class="bg-secondary"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Magic Search</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">API</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Resources </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="http://getbootstrap.com">Bootstrap v4</a> <a class="dropdown-item" href="http://dev.timelysystems.com">Timely Systems</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Jquery Help</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <div class="input-group"> <div class="input-group-prepend"> <select class="btn btn-secondary" id="inputGroupSelect02"> <option selected>Options</option> <option value="name">Name</option> <option value="color">Color</option> <option value="cmc">CMC</option> <option value="sets">Set</option> </select> <button class="btn btn-info" type="button" data-toggle="modal" data-target="#advanced_search"><i class="material-icons">settings</i></button> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-info" type="button" id="search_submit"><i class="material-icons">search</i></button> </div> </div> </form> </div> </nav> <div class="modal fade" id="advanced_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Advanced Search</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <input type="text" class=" advanced_search form-control" id="advanced_name" aria-describedby="emailHelp" placeholder="Name"> </div> <div class="form-group"> <input type="text" class="advanced_search form-control" id="search_color" placeholder="Color"> </div> <button type="search" class="btn btn-info btn-block" id="search_submit">Search</button> </div> </div> </div> </div> <br> <script> window.search = new Search(); window.search.update(); </script> <div class="container"> <div class="row"> <div class="d-flex flex-wrap justify-content-center"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=428468d8a8b3842450b4f54a173f2622&auto=format&fit=crop&w=751&q=80" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> </body>
.navbar { box-shadow: 0 0 7px black; } .card { border: none; } .search { border-radius: 0px; width: 3em; background-color: transparent; border: 0px; } .search:focus{ border-color:transparent; border-radius: 0px; background-color: transparent; border: 0px; color: white; } .material-icons { vertical-align: middle!important; }
class Search { constructor(){ //this.search = $("#search"); this.search_submit = $("#search_submit"); this.search_type = $("#search_type"); this.search_value = $("#search"); this.search_advanced_name['search_name'] = $('#advanced_name'); } update(){ this.search_submit.on("click", this, function(e){ alert("Search was Clicked!"); }); } }

Related: See More

Vue Material Kit PRO
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: