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

Posted 2023-05-08

【中文标题】JQuery UI 自动完成不结果显示在结果框中

【英文标题】：JQuery UI Autocomplete not result showing in result box

【发布时间】：2020-07-18 08:03:27

【问题描述】：

我正在尝试获取 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>

【参考方案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 控制台并调查“网络”选项卡以查看有效负载并确保您发送正确的详细信息并获得正确的响应。

【讨论】：

我从 Ajax 调用中得到了正确的响应，但我的问题无法绑定到前端的结果框中。如果我单击向下箭头按钮，那么我可以看到结果之一。我需要在框中显示结果列表。

@nandkishorbaviskar 请提供一个响应示例以供测试。

请找到预期结果屏幕截图