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

Question

我目前正在處理我的項目 NightScape，這是我和其他人的登錄頁面，我想添加一個谷歌搜索欄，但我所做的只是制作一個可以寫入的文本框。這是我的原始代碼，任何想法?

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

像這樣的東西可能是你想要的。 只需添加一個search按鈕，以確保用戶在entering搜索詞后clicks它，然后使用location.replace打開谷歌搜索頁面，您使用onclick function 查詢詞。

此外，您沒有id => .nightsearchbox ，它是您輸入的class 。 我們可以使用querySelector方法訪問這個 class，然后將其值作為查詢傳遞給google搜索頁面。

為了確保搜索icon （按鈕）位於實際搜索輸入旁邊，我們需要將按鈕input和button包裝在div中

現場工作演示：

 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>