0

私のサイトの検索ページを指す以下のコードを使用しています。ただし、クリックすると、「検索」ボタンのある非表示のドロップダウン入力ボックスが開くようにしたいと思います。次に、誰かが検索クエリを入力してボタンをクリックすると、これが私のサイトの検索ページに転送され、検索が実行されます。私は 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>
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;
}

最後に、次の JavaScript 関数を <head> に追加します。(たとえば、外部ファイルを使用できます。)

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() 関数を呼び出します。2 番目のコマンド「return false;」ブラウザが ./search.php サイトを直接ロードするのを防ぎます。(これは、誰かが JavaScript を無効にしている場合に便利です。./search.php サイトに直接リダイレクトされます。)

キャンセル ボタンの onclick イベントは、まったく同じことを行います。showSearchLink() 関数を呼び出してから、フォームが送信されないようにします。

ここですべてのコードをテストできます: http://jsfiddle.net/tKMt4/

検索ボタンをクリックしてフォームを送信すると、./search.php にリダイレクトされます。以下を使用して、PHP コードで入力データを受け取り、エコーすることができます。

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

検索機能自体を実装する方法に関するヒントについては、優れたチュートリアルを検索してください。おそらく最良の方法は、Web サイトのテキスト コンテンツを MySQL データベースに保存することです。

于 2013-08-01T20:52:20.830 に答える