Check out my code snippet below:
HTML
<input type="text" id="txtCity" />
<div id="customDropdownCities" style="position:absolute; top:0; left:0px; height:1px;"></div>
CSS
.ui-widget-content a
{
color: #222222 !important;
cursor: pointer !important;
float: left !important;
width: 100% !important;
border:1px solid #ffffff;
}
#myOwnMenuCities .ui-autocomplete
{
width: 200px !important;
max-height: 150px;
overflow:auto;
padding-right:20px;
}
JavaScript
var cityList = ["New York","Los Angeles","Chicago","Houston","Philadelphia"];
$('#txtCity').autocomplete({
source: cityList,
appendTo: "#customDropdownCities"
});
If you try to select an input, enter "a", and then choose the last item from the dropdown, it seems impossible. Can you figure out why? And any suggestions on how to resolve this issue?