如何使用 css、js 和 html 将谷歌搜索面板添加到我的网站？

Question

Im currently working on my project NightScape which is a landing page for myself and others and i wanted to add a google search bar but all ive managed to do is make a text box which you can write in. Here is my original code, any ideas?

HTML

<div class="nightsearch">
  <header>
    <input type="text" autocomplete="off" class="nightsearchbox" placeholder="Search Google...">
  </header>
</div>

JS

function search() {
var nightsearchbox = document.getElementById("nightsearchbox").value;
location.replace("https://www.google.com/search?q=" + nightsearchbox + "");
}

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.nightsearch {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 10vh;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
  position: absolute;
  bottom: 60px;
}

.nightsearchbox {
  height: 100%;
  max-height: 30px;
  width: 400%;
  max-width: 660px;
  display: flex;
  flex-direction: left;
  align-items: left;
  justify-content: left;
  text-align: left;
  min-height: 7vh;
  position: absolute;
  top: 15px;
  left: 10px;
}

Answer 1

Something like this may be you want. Just add a search button as well to make sure user clicks on it after entering the search words and then use location.replace to open up the google search page with you query words with an onclick function.

Also you do not have an id => .nightsearchbox its a class of your input. We can access this class using querySelector method and then its value to pass it as query to google search page.

In addtion to make sure that search icon (button) stays next to the actual search input we need to wrap button input and button that in div

Live Working Demo:

 function search() { var nightsearchbox = document.querySelector(".nightsearchbox").value; location.replace("https://www.google.com/search?q=" + nightsearchbox + ""); }

 .nightsearch { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 10vh; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); position: absolute; bottom: 60px; }.nightsearchbox { height: 100%; max-height: 30px; max-width: 660px; text-align: left; min-height: 7vh; }.google_search { display: flex; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="nightsearch"> <header> <div class="google_search"> <input type="text" autocomplete="off" class="nightsearchbox" placeholder="Search Google..."> <button onclick="search()"> <i class="fa fa-search" aria-hidden="true"></i> </button> </div> </header> </div>