按钮和文本移回原始位置

I have set when user types something in the search box, the suggestions will appear.

我设置了当用户在搜索框中输入内容时,会出现建议。

When suggestions appear, it will push the buttons and texts below down as I set its position relative.

当出现建议时,它会在我设置其相对位置时将按钮和文本按下。

But when user delete those words in the search box and the suggestion list disappears, the buttons and texts below the suggestion list did not move back to the original place.

但是当用户在搜索框中删除这些单词并且建议列表消失时,建议列表下方的按钮和文本不会移回原始位置。

How can I let the buttons and texts below the suggestion list move back to the original place when user delete those words in search box?

当用户在搜索框中删除这些单词时,如何让建议列表下方的按钮和文本移回原始位置?

This is my current code:

这是我目前的代码:

<?php
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
?>
<html>
    <head>
        <title>
            Brandon's Search Engine
        </title>
        <style type="text/css">
            #suggestion {
                border: 1px solid black;
                visibility: hidden;
                position: relative;
                background-color: transparent;
                z-index: 10;
            }
            .suggestion a {
                font-size: 12pt;
                color: black;
                text-decoration: none;
                display: block;
                width: 648px;
                height: auto;
                text-align: left;
                padding: 10px;
            }
            .suggestion a:hover {
                background-color: #dddddd;
                width: 644px;
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <form method="GET" action="search.php" name="q">
            <table align="center">
                <div>
                    <h1><center>Brandon's Search Engine</center></h1>
                </div>
                <div align="center">
                    <input type="text" name="q" id="q" class="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
                           onkeyup="getSuggestion(this.value)" autocomplete="off" autoFill="on" onblur="closeBox()"/>

                    <script>document.getElementById('q').focus()</script>
                    <div id="suggestionBox" style="visibility: collapse;">
                        <div id="suggestion" style="width: 645px; text-align: left; padding: 2px;">
                        </div>
                    </div>
                </div>
                <br />
                <div align="center">
                    <input type="submit" value="Search" name="submit" style="height: auto; width: 60px; padding: 2px" />
                    <input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
                </div>
                <div align="center">
                    Can't find your site? <br /> Insert <a href="insert.php">here</a>.
                </div>
            </table>
            <input type="hidden" name="page" value="1" />
        </form>
    </body>
</html>

Thanks in advance.

提前致谢。

1 个解决方案

#1

On your function in your onkeyup, you can check the text value and if that was empty change css position of your element to original:

在onkeyup上的函数中,您可以检查文本值,如果为空,则将元素的css位置更改为原始:

function getSuggestion(value){
      if(!value.length()){
            //change to original place
      }
      .
      .
      .
}

I hope to help

我希望能帮到你

1 个解决方案

#1

更多相关文章

随机推荐