javascript - 设置一个 "unattainable"下拉列表背景覆盖其他元素

Question

我有一个工作正常的自动完成功能，但是当下拉列表出现时，它几乎不可读，因为它覆盖了其他元素。

问题是我自己不创建下拉列表，它是根据发送到数据库的请求创建的，我无法准确地确定我必须修改哪个元素的属性才能拥有下拉列表就像一个 block 一样显示在其他元素之上的框。

我试图确定出现下拉列表时创建了哪些元素，但它似乎没有做任何事情。这是我的结果:

和我编码的 css 部分:

.ui-helper-hidden-accessible {
z-index: 1000;
display: block;
background: #f9f9f9;
border-top: 1px solid blue;

自动完成功能(不确定是否有帮助，但放在这里不需要任何费用)

// Auto-Complete sur liste publicitaire
$("#ag_pub_publicitaire_nompublicitaire").autocomplete
({
    source: function (request, response) {
        $.ajax
        ({
            url: "https://cms.ag-carto.com/CMS_service/ws_ag_sgbdr_json/ag_sgbdr.asmx/ag_pub_publicitaire_get_list",
            data: "{'ag_sql_query_text':'"  + request.term + "','count':'0'}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                var found = $.map(data.d, function (item) {
                    return {
                        value: item.ag_pub_publicitaire_nompublicitaire,
                        ag_pub_publicitaire_entityid: item.ag_pub_publicitaire_entityid,
                    };
                });
                if (found.length == 0) {
                    $('#ag_pub_publicitaire_nompublicitaire').val("Pas de publicitaire Trouvé ! Ressaisissez...");
                    $('#ag_pub_publicitaire_entityd').val("");
                    //alert("Pas de publicitaire Trouvé ! Ressaisissez...");
                }
                else {
                    //$('#infopconso').val(found.length + " Compteurs Trouvés ! Choisissez dans la liste...");
                    //$('#infopconso').val(found.length + " Compteurs Trouvés ! Choisissez dans la liste...");
                }

                response(found);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) 
            {
                alert(textStatus);
            }
        });
    },
    minLength: 3,
    select: function (event, ui) 
    {
        if (ui.item.ag_pub_publicitaire_nompublicitaire == "-1") {
            $('#ag_pub_publicitaire_nompublicitaire').val("");
            $('#ag_pub_publicitaire_entityd').val("");
            $('#ag_pub_publicitaire_nompublicitaire').focus();
        }
        else {
            $("#ag_pub_publicitaire_entityid").val(ui.item.ag_pub_publicitaire_entityid);
        }
    }
});

现在我认为我没有瞄准正确的类(class)，但我真的不知道下一步该尝试什么。任何帮助将不胜感激:)

提前致谢，祝您有美好的一天:)

Answer 1

您定位的是错误的 div css..

这里是修复。它的目标是显示自动完成功能的 id #ui-id-1 ul..

 .ui-widget.ui-widget-content {
    z-index: 1000;
display: block;
background: #f9f9f9;
border-top: 1px solid blue;
}