After testing two different approaches:
<div id = "team-search-container">
<label for="team-search" class = "text-center">
<input type = "text" id = "team-search">
</label>
</div>
With the following code snippet:
$( "#team-search" ).catcomplete({
delay: 0,
source: teamdata,
appendTo: '#team-search-container'
});
The div expands to display the elements, creating a layout similar to this: (Link to image) (The text ComboBox elements should read Autocomplete elements instead)
However, omitting the appendTo option as shown below:
$( "#team-search" ).catcomplete({
delay: 0,
source: teamdata
});
The functionality remains intact, but it generates empty space at the end of the page equal to the height of the autocomplete feature. The CSS utilized is:
.ui-autocomplete{
position: relative;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
.ui-autocomplete-category{
font-size: 18px;
list-style: none;
width: 200px;
}
.ui-menu-item{
list-style: none;
width: 200px;
cursor: default;
background-color: #565656;
}
.ui-helper-hidden-accessible {
display: none;
}
Due to the specified max-height being set as 600px, not appending anything will result in a surplus of 600px blank space at the page bottom, despite displaying the autocomplete directly beneath the search bar.