Can someone assist me with Autocomplete? When I search for an RTO code, the result box appears but without a list (refer to Screen : 1). However, when I press the down arrow button on the keyboard, the list starts appearing one by one (as shown in Screen : 2 - 3).
I need help to display the results in the result box.
Below is my script:
$(document).ready(function () {
$("#RTOCode").autocomplete({
source: function (request, response) {
var _RTOCityList = {
RTOCityCode: $("#RTOCode").val(),
}
if (_RTOCityList.RTOCityCode != "") {
$.ajax({
type: "POST",
data: JSON.stringify(_RTOCityList),
contentType: "application/json; charset=utf-8",
url: "/Localhost/BindRTOCity",
dataType: "json",
async: false,
success: function (data) {
response($.map(data.jsBindDataList, function (item) {
return { label: item.RTOCityCode, value: item.RTOCityCode, RTOCityName: item.RTOCityName, RTOCityCode: item.RTOCityCode };
}))
}
})
}
else {
$("#RTOCode").val("");
}
},
select: function (e, i) {
$("#RTOCity").val(i.item.RTOCityName);
$("#hdn_RTOName").val(i.item.RTOCityName);
$("#hdn_RTOCode").val(i.item.RTOCityCode);
},
minLength: 2,
autoFocus: true
});
});
<style>
.ui-autocomplete {
z-index: 1050;
height: 200px;
}
</style>
<div class="col-sm-6">
<label for="RTOCode" class="required">RTO Code</label>
<input type="text" name="RTOCode" id="RTOCode" />
</div>