按钮和文本移回到原来的位置

当用户在搜索框中键入内容时，我已经设置了这些建议。按钮和文本移回到原来的位置

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

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

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

这是我当前的代码：

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

在此先感谢。

来源

2014-01-14 HFial1964

在你的onkeyup你的功能，你可以检查文本值，如果这是你的元素的空改变CSS位置原始：

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

我希望能帮助

来源

2014-01-14 07:00:13 user3161975

你能告诉我一个例？ – HFial1964

在你的onkeyup功能中你做了什么？ IF按钮具有相对位置，我认为当建议框被隐藏时，它们会回到原来的位置 – user3161975

按钮和文本移回到原来的位置

回答

相关问题