javascript - 如何将搜索框链接到我页面上的网站?

标签 javascript html css search

我希望制作一个简单的搜索框,该搜索框可以链接到我网站上的特定目的地,并添加“?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>

最佳答案

我将重点关注这个问题的后端部分,其他人可能会参与验证过程。对于表单中的“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 的 url ... php 代码将获取 id,然后您可以执行输出适当的代码播放器。

关于javascript - 如何将搜索框链接到我页面上的网站?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47562369/

相关文章:

javascript - 视差效果 - 强制文本 block 表现得像背景附件 : fixed

javascript - 从 javascript 动态添加元素

多个框上的 Jquery 悬停事件

javascript - 如何在 asp.net 页面中使用 javascript 创建弹出窗口 - 无法在 javascript 弹出窗口中传递值

JavaScript 与 IE 不兼容

javascript - 如何处理 "a script on this page is causing internet explorer to run slowly"警报?

javascript - 单击另一个关闭下拉菜单

jquery - 如何在单击时为 div 设置动画,然后在第二次单击时反转动画?

jQuery - 动画元素定位

php - 无法使用php和ajax从数据库中获取数据