JQuery Пользовательский интерфейс автозаполнения не отображается в окне результатов - PullRequest
Новая
       13

JQuery Пользовательский интерфейс автозаполнения не отображается в окне результатов

0 голосов
/ 06 апреля 2020

Я пытаюсь получить результат 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>

1 Ответ

0 голосов
/ 06 апреля 2020

Рассмотрим следующий код. Из-за характера 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 будет значением текстового поля. Так как для него установлено значение minLength из 2, никогда не будет шанса для пустого значения ("").

Вам потребуется использовать веб-консоль и исследовать вкладку Сеть, чтобы просмотреть полезные данные и убедитесь, что вы отправляете правильные данные и получаете правильный ответ.

...