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

问题描述

我目前正在我的项目NightScape上工作，这是我自己和其他人的登陆页面，我想添加一个Google搜索栏，但所有ive我都做的是制作一个文本框，您可以在其中输入内容。这是我的原始代码，有什么想法吗？

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.05),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;
}

解决方法

您可能想要这样的东西。只需添加一个search按钮，以确保用户clicks在entering个搜索词之后就可以在其上使用，然后使用location.replace来打开Goog​​le搜索页面以查询您的词使用onclick函数。

您也没有id => .nightsearchbox及其输入的class。我们可以使用querySelector方法访问该类，然后使用其值将其作为查询传递给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.05),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>