html 搜索前 5 名搜索

Question

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

我想为我的网站做一个内置的搜索栏，它在 Google 中搜索搜索词，但在它之前添加前 5 个，例如：前 5 个 [搜索词]。 （例如，如果用户输入香蕉，网站会打开一个新窗口，在 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 并且在用户按下“提交”按钮之前，您必须获取用户输入并在此之前添加“默认字符串”。在这种情况下，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