Question

我有一个jquery自动完成搜索栏。但结果的最大高度不起作用，我无法理解为什么。我希望结果有一些最大高度，如果需要，可以滚动。

.frmSearch {
    margin: 2px 0px;
    padding:40px;
    position:absolute;
    z-index:7000;
}
#country-list {
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    width:300px;
}
#country-list li {
    padding: 10px;
    background:#FAFAFA;
    border-bottom:#F0F0F0 1px solid;
}
#country-list li:hover {
    background:#F0F0F0;
}
#search-box {
    padding: 10px;
    border: #F0F0F0 1px solid;
    width:300px;
}
#suggesstion-box {
    overflow:scroll;
    max-height:300px;
    position:absolute;
}
#button3 {
    //padding: 2px;
    margin-left:2px;
    width: 20px;
    height: 20px;
    //font-size: 14px;
    //background:#F0F0F0;
    //color:#303030;
    //border: 1px solid #E0E0E0;
    //border-radius: 4px;
    vertical-align: -24px;
}
#button3:hover {
    cursor:pointer;
    border: 1px solid #484848;
}
#button3:active {
    border: 2px solid #484848;
    cursor:pointer;
    //background:#D0D0D0;
    //padding:1px;
    //font-size:15px;
}

$(document).ready(function(){
    $("#search-box").keyup(function(){
        $.ajax({
            type: "POST",
            url: "readCountry.php",
            data: 'keyword=' + $(this).val(),
            beforeSend: function(){
                $("#search-box").css("background","#FFF url(LoaderIcon.gif)   no-repeat 165px");
            },
            success: function(data){
                $("#suggesstion-box").show();
                $("#suggesstion-box").html(data);
                $("#search-box").css("background","#FFF");
            }
        });
    });
});

function selectCountry(val) {
    $("#search-box").val(val);
    $("#suggesstion-box").hide();
}

<div class="frmSearch">
    <form action="search_result1.php" method="post">
        <input type="text" id="search-box" autocomplete="off" name="search" placeholder="Country Name" /> 
        <input type="image" name="submit" value="submit" src="images/searchb1.png" id="button3"/>
    <div>
        <div id="suggesstion-box"></div>
        </form>

Answer 1

如果上面的HTML来自实际网站，那么您需要修复它。

<div class="frmSearch">
    <form action="search_result1.php" method="post">
        <input type="text" id="search-box" autocomplete="off" name="search" placeholder="Country Name" /> 
        <input type="image" name="submit" value="submit" src="images/searchb1.png" id="button3"/>
    <div>
        <div id="suggesstion-box"></div>
    </form>

<div class"frmSearch">未关闭，您在<div>之前有一个<div id="suggestion-box"></div>。{/ p>

选中此Fiddle

顺便说一下，我检查了您的实际网站，但最大高度正常。我尝试将max-height设置为100px并在搜索输入中键入a。并且结果滚动是活动的。

最大高度不起作用

1 个答案: