Search with Overlay CSS

Search with Overlay Css html and Js use Bootstrap 4 / Buscador con Overlay Css html y Js código, usa Bootstrap 4

By Jonathan De Jesús

<div class="wrapperpage"></div>
<header>
<div class="site-nav" role="navigation"><!--site-nav-->
 <div class="container"><!--container-->
 <div class="row"><!--row-->
 <div class="col-md-2 text-center"><!--col-->
 <a class="site-nav-logo"></a>
 </div><!--col-->
 <div class="col-md-7"><!--col-->
 <form class="search-box"><!--form-->
 <input class="search-input completame" type="text" placeholder="¿Qué estás buscando?">
 <input type="submit" class="fa-search" value="&#xf002;">
 </form><!--form-->
 </div><!--col-->
 <div class="col-md-3"><!--col-->
 <ul class="contacto">
 <li><a href="#" class="small">Llámanos:</a></li>
 <li><a href="#"><b>(4) 8391751</b></a></li>
 </ul>
 <ul class="marcador">
 <li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-street-view fa-3x"></i></a></li>
 </ul>
 </div><!--col-->
 </div><!--row-->
 </div><!--container-->
</div><!--site-nav-->
</header>
<div class="common"></div>

.common{width:90px;height:700px}
body{background-color:#eee;width:100%;height:100%}
.wrapperpage{width:100%;height:100%;background-color:transparent;position:absolute}
.site-nav{position:fixed;background:#fff!important;top:0;left:0;width:100%;padding:20px 0 2px;z-index:100;transition:all .3s ease;border-bottom:1px solid;border-color:transparent}
.site-nav.affix{background:#fff;border-color:#E7E7E7;padding:20px 0 2px}
.site-nav-logo{display:block;background:url(https://localhost/mizonadigital.com/img/logove.png) 0 0/100% no-repeat;width:150px;width:135px;height:55px;transition:all .3s ease}
.site-nav.affix .site-nav-logo{width:135px;height:55px}
.search-box{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;border:2px solid #ddd;border-radius:20px;width:100%;height:40px;margin-right:auto;margin-left:auto;margin-bottom:20px;background-color:#FFF}
.search-input{-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;padding-left:15px;height:100%;line-height:100%;border:0;background-color:transparent;font-size:15px;font-weight:700;color:#222}
.search-input:focus{outline:0}
.fa-search{padding-right:10px;font-size:22px;height:100%;line-height:100%;color:#ddd;font-family:FontAwesome;background:0 0;border:none}
.fa-search:hover{color:#00838F;cursor:pointer}
.fa-search:focus{outline:0}
.contacto{float:left}
.contacto li,.marcador li{list-style-type:none}
.contacto a{color:#444!important;padding:0 5px;text-decoration:none}
.marcador{float:right;border-left:1px dotted #ddd}
.marcador li a{color:#222}
.marcador li a:hover{color:#B20009}
.modal{z-index:10000}
.autocomplete-suggestions{border-radius:0;font-family:"Myriad Pro";color:#777;font-weight:500;margin-top:2px;text-align:left;cursor:default;border:1px solid #ccc;border-top:0;background:#fff;box-shadow:-1px 1px 3px rgba(0,0,0,.1);position:absolute;display:none;z-index:9999;max-height:254px;overflow:hidden;overflow-y:auto;box-sizing:border-box}
.autocomplete-suggestion{position:relative;padding:0 .6em;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.02em;font-size:15px;color:#999}
.autocomplete-suggestion b{font-weight:700;color:#555}
.autocomplete-suggestion.selected{background:#f0f0f0}

$(document).ready(function() {
  $(".search-input").mouseenter(function() {
    $(".fa-search").css("color", "#222");
  });
  $(".search-input").keydown(function() {
    //$("body").css("background-color","rgba(0,0,0,0.7)");
    $("body").css({
      "background-color": "rgba(0,0,0,0.7)",
      transition: "0.35s ease-in-out"
    });
  });

  $(".search-input").mouseout(function() {
    $("body").css("background-color", "");
    //$(".autocomplete-suggestions").hide();
    $(".fa-search").css("color", "");
  });
});

$(function() {
  $(".completame").autoComplete({
    minChars: 1,
    source: function(term, suggest) {
      term = term.toLowerCase();
      var choices = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "Assembly",
        "BASIC",
        "Batch",
        "C",
        "C++",
        "CSS",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "HTML",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "PowerShell",
        "Python",
        "Ruby",
        "Scala",
        "Scheme",
        "SQL",
        "TeX",
        "XML"
      ];
      var suggestions = [];
      for (i = 0; i < choices.length; i++)
        if (~choices[i].toLowerCase().indexOf(term))
          suggestions.push(choices[i]);
      suggest(suggestions);
    }
  });
});