Question

我正在使用的以下代码（照顾http://www.nodstrum.com/2007/09/19/autocompleter/）是文本框的自动填充功能。演示就在这里 - http://res.nodstrum.com/autoComplete/ 问题是，如果你输入说“t”，autofil弹出框会移动其下面的html的其余部分。我该如何解决？我尝试过使用z-index但无法使用它。

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

Answer 1

尝试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

自动填充弹出框移动HTML

1 个答案: