JQuery UI 自动完成不结果显示在结果框中

Question

我正在尝试获取 Autocomplete 的结果。当我搜索 RTO 代码时，结果框显示没有列表，如屏幕所示：1 但是当我从键盘单击向下箭头按钮时，它显示列表之一一个点击向下箭头按钮，如屏幕所示：2 - 3

请帮我在结果框中显示结果。

Screen:1

Screen:2

Screen:3

Expected Result

这是我的脚本

$(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

考虑以下代码。由于 AJAX 的性质，我无法测试。

$(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>

对于自动完成，当使用源函数时，request 对象包含元素 term。因此，request.term 将是文本字段的值。由于您已将其设置为 2 的 minLength，因此该值永远不会为空 ("")。

您将需要使用 Web 控制台并调查“网络”选项卡以查看有效负载并确保您发送正确的详细信息并获得正确的响应。