如何在我的页面上创建指向网站的搜索框链接？答案

【问题标题】：How do I make a search box link to a site on my page?如何在我的页面上创建指向网站的搜索框链接？
【发布时间】：2017-11-29 21:45:18
【问题描述】：

我正在寻找一个简单的搜索框，该框将链接到我网站上的特定目的地，并添加“？id = ...”，其中 ... 将是他们在搜索框中输入的任何内容。例如，如果他们在搜索框中输入 7654143，它会将他们链接到 .../player?id=7654143

我相信我知道如何处理其中的 html 部分，但是当涉及到 javascript 时我迷失了，这是我认为我需要它才能工作...

除此之外，如果他们输入的内容不符合要求的准则（数字必须以 7654 开头，并且长度必须准确为 15 个字符），搜索框的背景颜色将呈红色闪烁 1 秒钟，并带有过渡

<!DOCTYPE html>
<html>
    <head>
        <title>Stats page</title>
        <link href="css/style.css" type="text/css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
    </head>
    <body class=body>
        <div class="header">
            <a href=#>Leaderboards</a>
            <a href=#>Server stats</a>
            <a href=# class=active>Search</a>
        </div>
        <h1 class=title>Roleplay<span>Stats</span></h1>
        <div class=search>
            <input type="text" placeholder="Who are you looking for?">
        </div>
    </body>
</html>

【问题讨论】：

这就是表格的用途
您可能希望使用 onChange 来调用您的函数。在函数中，您可以访问您的输入值并执行验证。您还需要一些 DOM 操作来更改颜色。
使用表单就不需要JS了......
我之前没有使用过表单，但我试了一下：

之后我的下一步是什么？（不包括样式）

标签： javascript html css search

【解决方案1】：

我将专注于这个问题的后端部分，其他人可能会参与验证过程。对于表单中的“id=”部分，我个人会使用 PHP。确保您的输入是在一个表单中，并使用方法 GET 来确保值进入 URL。（假设你的目标页面是player.php，如果你走这条路线，它需要是.php）

在表单页面上（输入中的名称将放在 url 中：player.php?name-of-input=...）：

<form method="get" action="player.php">
    <input type="text" name="id" placeholder="Who are you looking for?">
</form>

在“播放器”页面上，您必须隔离 url 中的值，然后获取与该值对应的适当播放器，这就是 PHP 派上用场的地方。

在播放器页面上，应该放在代码顶部的php部分：

<?php 
   $player = $_GET['id'];
   //The "id" inside the brackets is actually the name of the input in your form
?>

使用此代码，用户将输入 id，该 id 将转到 url。然后，播放器页面，假设它是 player.php，会有一个看起来像 player.php?id=7654...播放器。

【讨论】：

问题是我绝对不能使用 php 作为我想要指向的链接，因为我已经创建了整个页面 (thecopperkings.co.uk/ant/stats/html/player.html) - 它从 api 获取信息并显示在这里。例如，如果您在搜索栏中输入“76561198062083666”，它应该会将您定向到 (thecopperkings.co.uk/ant/stats/html/…)
实际上是什么阻止了您将页面重命名为 player.php？还有其他更复杂的方法可以用 Javascript 做同样的事情，但我没有使用它们，而且我对它们不够满意，无法向您展示如何做到这一点。我不是强迫你使用我的方法，这只是我认为最简单的方法。