0

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

<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>
4

1 回答 1

0

只需在链接前添加一个带有输入字段和提交按钮的表单，并为 <form> 和 <a> 元素提供 id（这里：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 代码。它默认隐藏完整的 <form> 元素：

#searchForm {
    display:none;
}

最后，在 <head> 中添加以下 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() 函数。第二个命令“return false;” 防止浏览器直接加载 ./search.php 站点。（如果有人禁用了 JavaScript，这很有用：他将被直接重定向到 ./search.php 站点。）

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

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

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

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

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

于 2013-08-01T20:52:20.830 回答