I've been struggling with this issue for hours now. Using Bootstrap 3, I am attempting to implement the bootstrap autocomplete input with ajax. The data is being retrieved successfully through Ajax, and I can confirm that. However, the dropdown menu is being added to the DOM with the CSS property display: none. If I manually remove this in the dev console, the dropdown appears but then remains open indefinitely.
Why is Bootstrap failing to handle the opening and closing of the dropdown?
Below is the code snippet:
<input class="form-control basicAutoComplete" placeholder="Select a ship" type="text" autocomplete="off">
<script>
$(document).ready(function () {
$('.basicAutoComplete').autoComplete({
resolver: 'custom',
formatResult: function (item) {
return {
value: item.id,
text: "[" + item.id + "] " + item.name,
};
},
events: {
search: function (qry, callback) {
$.ajax(
"@Url.Action("shipdata", "autocomplete")",
{
dataType: "JSON",
data: { 'qry': qry }
}
).done(function (res) {
console.info(res.items);
callback(res.items);
});
}
}
});
});
</script>
Many thanks