Question

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

问题是我自己没有创建下拉列表，它是根据发送到数据库的请求创建的，我无法确定我确切地识别了哪个元素的属性修改以便有一个下拉框，就像在其他元素上显示的块一样。

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

和我编码的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);
        }
    }
});

现在我认为我没有针对合适的班级，但我真的不知道下一步该尝试什么。任何帮助将不胜感激:)

提前致谢并度过美好的一天：）

Answer 1

你的目标是错误的div css ..

以下是修复 .Its以ul＃id-ui-id-1为目标，显示自动完成功能..

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

Answer 2

并不是真的为这个感到骄傲，但我没有在我的html中包含jquery-ui.css文件，这就是为什么它没有按照我想要的方式工作

设置一个＆＃34;无法实现的＆＃34;下拉列表背景将覆盖其他元素

2 个答案: