Question

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

当出现建议时，当我将其位置设置为 relative 时，它会将按钮和文本向下按下。

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

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

这是我目前的代码：

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

提前致谢。

Answer 1

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

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

我希望能帮助

按钮和文本移回原始位置

1 个答案: