JQuery UI Autocomplete not result showing in result box

Question

I'm trying to get result of Autocomplete.when I search for RTO code then result box showing with no list as shown in screen: 1 but when I click on down arrow button from keyboard the it is showing the list one by one on click of down arrow button as shown in screen: 2 - 3

Please help me to show the result in result box.

Screen:1

Screen:2

Screen:3

Expected Result

Here is the 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>

Answer 1

Consider the following code. Due to the nature of AJAX, I am unable to test.

 $(function() { $("#RTOCode").autocomplete({ source: function(request, response) { $.ajax({ type: "POST", data: JSON.stringify(request), 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 }; })) } }); }, select: function(e, i) { $("#RTOCity").val(i.item.RTOCityName); $("#hdn_RTOName").val(i.item.RTOCityName); $("#hdn_RTOCode").val(i.item.RTOCityCode); return false; }, minLength: 2, autoFocus: true }); });

 .ui-autocomplete { z-index: 1050; height: 200px; }

 <div class="col-sm-6"> <label for="RTOCode" class="required">RTO Code</label> <input type="text" name="RTOCode" id="RTOCode" /> </div>

For Autocomplete, when using a Function for Source, request object that contains element term . Therefore, request.term will be the value of the text field. Since you have it set to minLength of 2, there will never be a chance for the value to be empty ("").

You will need to use your Web Console and investigate the Network tab to view the payloads and ensure that you're sending the right details and getting the right response.