时间戳

首页 > 解决方案 > JQuery UI 自动完成不结果显示在结果框中

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

问题描述

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

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

屏幕：1

屏幕：2

屏幕：3

预期结果

这是我的脚本

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

标签： javascriptjquerycssjquery-uijquery-ui-autocomplete

解决方案

考虑以下代码。由于 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>

对于自动完成，当对 Source 使用 Function 时request，包含 element 的对象term。因此，request.term将是文本字段的值。由于您将其设置为minLength2，因此该值永远不会为空（“”）。

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

推荐阅读