Search with Overlay Css html and Js use Bootstrap 4 / Buscador con Overlay Css html y Js código, usa Bootstrap 4
<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="">
</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);
}
});
});