Question

我使用以下代码指向我网站的搜索页面。但是，我想在点击时这样做，它会打开一个带有“搜索”按钮的隐藏下拉输入框。然后，当有人键入搜索查询并单击该按钮时，它会将其转发到我的网站的搜索页面并进行搜索。我不知道如何实现这个，因为我是一个Javascript / PHP菜鸟，但它似乎是我的网站的一个很酷的mod。如果有人需要更多代码片段，请告诉我们。谢谢！

<a class="button_link_main" href="./search.php"><img src="/images/search.png" onmouseover="this.src='/images/searchsite_hover.png'" onmouseout="this.src='/images/search.png'" /></a>

Answer 1

只需添加一个带有输入字段的表单，然后在链接前面提交按钮，并提供＆lt; form＆gt;和＆lt; a＆gt;元素ids（这里：searchForm和searchLink）：

<form id="searchForm" action="./search.php" method="post">
    <input type="text" name="q" value="">
    <input type="submit" value="Search">
    <input type="submit" value="Cancel" onclick="showSearchLink();return false;">
</form>
<a id="searchLink" class="button_link_main" href="./search.php" onclick="showSearchForm();return false;">Link</a>

添加此CSS代码。它隐藏了完整的＆lt; form＆gt;默认情况下的元素：

#searchForm {
    display:none;
}

最后，在＆lt; head＆gt;中添加以下JavaScript函数。（例如，您可以使用外部文件。）

function showSearchForm() {
    // show the form by setting style="display:inline"
    document.getElementById('searchForm').style.display = 'inline';
    // hide the link by setting style="display:none"
    document.getElementById('searchLink').style.display = 'none';
}

function showSearchLink() {
    // hide the form
    document.getElementById('searchForm').style.display = 'none';
    // show the link
    document.getElementById('searchLink').style.display = 'inline';
}

如果用户单击链接，则onclick事件将调用showSearchForm（）函数。第二个命令“返回false;”阻止浏览器直接加载./search.php网站。（如果有人禁用了JavaScript，这将非常有用：他将直接重定向到./search.php网站。）

取消按钮的onclick事件完全相同。它调用showSearchLink（）函数，然后阻止提交表单。

您可以在此处测试所有代码：http://jsfiddle.net/tKMt4/

如果有人通过点击搜索按钮提交表单，他将被重定向到./search.php。您可以使用以下命令接收和回显PHP代码中的输入数据：

<?php
echo $_POST['q'];
?>

有关如何实现搜索功能的提示，您应该搜索一个好的教程。最好的办法可能是将您的网站文本内容存储在MySQL数据库中。

如何将img链接到文本输入/提交框中，然后将输入的内容传递到另一个页面？

1 个答案: