Muhammad Mateen Muhammad Mateen - 6 months ago 27
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

$("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>

Comments