Html搜索前先搜索top 5

Question

我的网站有问题。我希望有人知道如何解决它。

我想为我的网站做一个内置搜索栏，搜索 Google 搜索词，但在它之前添加前 5 个，例如：前 5 个[搜索词]。 （例如，如果用户输入香蕉，该网站将打开一个新的 window，其中包含 Google 搜索：前 5 个香蕉）

我试图找出如何使这成为可能，但我不知道该怎么做。

我尝试构建一个 html 表单：

            <form action="https://www.google.com/search" method="GET">
                <input type"text" name="q" placeholder="Search">
                <input type="submit" value="Search">
                </form>

但我无法将获取表单操作放入 https://www.google.de/search?&q=top+5

希望你能帮我解答一下。

Answer 1

@Terox 对于您的用例，您需要动态更新用户值，而仅使用 HTMl 是不可能的。您需要使用 javascript 并且在用户按下 "submit" 按钮之前，您必须获取用户输入并在此之前添加 "default string"。在这种情况下，表单 action 对您没有帮助，您可以针对此特定用例使用以下代码

<script type="application/javascript">
    // get elements of the form
    const form = document.querySelector("#searchForm");
    const inputBox = document.querySelector("#inputBox");

    // add a listener to update the value on form submit
    form.addEventListener("submit", event => {
        // prevents automatic submit of the form and lets you update the value
        event.preventDefault();

       // takes you to different url and append your custom string before
        window.location.href = 'https://www.google.com/search?q=top+5+' + inputBox.value;
    });
</script>

了解更多信息 here