Question

我有一个使用自动建议的输入字段。输入字段正下方有一个div标签，显示输入字母表时的建议。但是在输入字段的下方还有另一个部门，表单提交后会显示一些结果。由于这两个部门重叠，我无法点击建议。

输入标记

<input type="text" id="book" name="book"  placeholder="BOOK" 
                class="input1"  autocomplete="off"><br><br>

<div class="autodropdown">
<ul class="suggestresult"></ul>

</div>

JS档案

$(document).ready(function(){
$('#book').keyup(function(){
    var query_string = $(this).val();
    $.ajax({
        type: "POST",
        url: "delete_book.php",
        data: { name:query_string },

        success: function(data)
        { 
            $('.suggestresult').html(data);
            $('.suggestresult li').click(function(){
                var return_value = $(this).text();
                $('#book').attr('value', return_value); 
                $('#book').val(return_value);
                $('.suggestresult').html('');
            });
        }
    });
});

});

css文件

.autodropdown{position:absolute;
top:32%;
left:9%;}

.suggestresult{
width:270px;
list-style:none;
}

.suggestresult li{

padding:15px;
border:1px solid #333;
border-top:0;
cursor:pointer;
background:#333;
color:#fff;
border-bottom:1px solid #666;
}

.suggestresult li:hover{
background:#666;
color:#ffffff;
cursor:pointer;
}

在输入字段正下方划分

<div id="adiv1" class="adiv"></div>

用css

#adiv1{
  width:250px;
  height:400px;
  /* background-color:white; */
  position:absolute;
  top:45%;
  left:12%;
  color:white;
  font-size:24px;
  }

有什么方法可以解决这个问题吗？谢谢。

Answer 1

尝试将.suggestresult位置设置为相对值和两个div的z-index：

3.7.0-rc

编辑：或者相反，取决于你想要实现的目标......

由于部门重叠，Autosuggest无法正常工作

1 个答案: