自動填充彈出框移動html

我正在使用的以下代碼（關注http://www.nodstrum.com/2007/09/19/autocompleter/）是文本框的自動填充功能。演示在這裏 - http://res.nodstrum.com/autoComplete/ 問題是，如果您輸入「t」，自動填充彈出框會移動其下的其餘html。我該如何解決這個問題？我已經嘗試過使用z-index，但無法使其正常工作。自動填充彈出框移動html

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ajax Auto Suggest</title> 

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script> 

<script type="text/javascript"> 
function lookup(inputString) { 
    if(inputString.length == 0) { 
     // Hide the suggestion box. 
     $('#suggestions').hide(); 
    } else { 
     $.post("rpc.php", {queryString: ""+inputString+""}, function(data){ 
      if(data.length >0) { 
       $('#suggestions').show(); 
       $('#autoSuggestionsList').html(data); 
      } 
     }); 
    } 
} // lookup 

function fill(thisValue) { 
    $('#inputString').val(thisValue); 
    setTimeout("$('#suggestions').hide();", 200); 
} 
</script> 

<style type="text/css"> 
body { 
    font-family: Helvetica; 
    font-size: 11px; 
    color: #000; 
} 

h3 { 
    margin: 0px; 
    padding: 0px; 
} 

.suggestionsBox { 
    position: relative; 
    left: 30px; 
    margin: 10px 0px 0px 0px; 
    width: 200px; 
    background-color: #212427; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    border: 2px solid #000; 
    color: #fff; 
} 


.suggestionList { 
    margin: 0px; 
    padding: 0px; 
} 

.suggestionList li { 

    margin: 0px 0px 3px 0px; 
    padding: 3px; 
    cursor: pointer; 
} 

.suggestionList li:hover { 
    background-color: #659CD8; 
} 
</style> 

</head> 

<body> 


<div> 
    <form> 
     <div> 
      Type your county: 
      <br /> 
      <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" /> 
     </div> 

     <div class="suggestionsBox" id="suggestions" style="display: none;"> 
      <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> 
      <div class="suggestionList" id="autoSuggestionsList"> 
       &nbsp; 
      </div> 
     </div> 
     HERE 
    </form> 
</div>

來源

2013-08-30 user2484214

如果幫助......做給予好評的，以及... :) –

嘗試position:fixed

.suggestionsBox { 
    position: fixed; 
    left: 30px; 
    margin: 10px 0px 0px 0px; 
    width: 200px; 
    background-color: #212427; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    border: 2px solid #000; 
    color: #fff; 
}

enter image description here

來源

2013-08-30 04:39:10

自動填充彈出框移動html

回答

相關問題