Muhammad Mateen Muhammad Mateen - 1 year ago 85
Javascript Question

Making Search engine like google

i am building a search engine in ASP.NET which will show products not the links,my question is what is the trick or javascript function that when user type his search the search bar came on the top with results like google,i want that functionality in my search engine

Answer Source

$("header input").on("input", function(){
  if(this.value.length > 0){
    $("header").addClass("hasValue");
  }
});
*{box-sizing: border-box; margin:0;}

header{
  position: absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
  text-align: center;
  padding: 16px 24px;
}
header input{
  display: block;
  vertical-align: top;
  padding: 8px;
  border-radius: 3px;
  border:1px solid #ccc;
}
/* ONCE INPUT HAS VALUE: */
header.hasValue{
  position:relative;
  top:0; left:0;
  transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%);
  text-align:left;
  background:#eee;
}
header.hasValue input{
  display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="//placehold.it/80x33/f0f/fff?text=LOGO" alt="LOGO">
  <input type="search" placeholder="Search products">
</header>