I am attempting to implement the jquery-ui autocomplete combobox in a .Net Core 2.2 web application, but I seem to be encountering a CSS issue. Here is how it currently appears: https://i.sstatic.net/wXaBg.png
In addition to the jquery-ui CSS, I am also using datatables CSS and bootstrap CSS. This style is being applied as well:
<style>
.ui-autocomplete {
max-height: 150px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
z-index: 1000 /*show the dropdown over the addform*/
}
The HTML code for this section is as follows:
<div class="row">
<div class="col-sm-3">
<label id="PersonIdLabel" class="custom-label">Choose Person</label>
</div>
<div class="col-sm-3">
<input id="PersonId" class="form-control" type="text" />
</div>
<div class="col-sm-3">
<input id="PersonName" class="form-control text ui-widget-content ui-corner-all" type="text" />
</div>
<div class="col-sm-2">
<a class="btn btn-sm btn-primary" asp-action="ttCreate"><span class="glyphicon glyphicon-plus"></span>New Transaction</a>
</div>
</div>
The JavaScript keydown event function is defined as:
$('#PersonId').keydown(function () {
//table = table.ajax.reload();
$(this).autocomplete({
source: function (request, response) {
$.ajax({
url: "/Household/getPersonsJson2/",
type: 'GET',
dataType: "json",
data: {
search_str: request.term
},
success: function (data) {
//console.log(data);
response(data);
}
});
},
appendTo: "#dialog-form",
minLength: 2,
select: function (event, ui) {
//console.log(ui.item.label + " " + ui.item.value);
$("#PersonName").val(ui.item.label);
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});