I am encountering an issue with my autocomplete function where the drop down list appears unreadable as it is overlapping other elements on the page.
The problem lies in the fact that I did not manually create the drop down list, but rather it is generated from a database request. I am struggling to pinpoint which element's property needs to be modified in order to have the dropdown box display properly over the other elements.
I attempted to identify the elements created when the dropdown list appears, but so far it has been unsuccessful. Here is what I found:
https://i.sstatic.net/KxBzT.png
Here is the CSS code I have implemented:
.ui-helper-hidden-accessible {
z-index: 1000;
display: block;
background: #f9f9f9;
border-top: 1px solid blue;
}
Below is the Autocomplete function code:
// 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);
}
}
});
At this point, it seems like I may not be targeting the correct class for modifications. Any guidance or suggestions on how to proceed would be greatly appreciated :)
Thank you in advance and I hope you have a wonderful day!