Отключить навигацию по стрелкам вверх / вниз для автозаполнения jquery ui

Question

Я добавил пользовательский тип автозаполнения jQuery.Существует список автозаполнения, выбранный клавишами со стрелками вверх / вниз.Но я хочу отключить список выбора по нажатию клавиш. вот код

И мы можем просто отключить определенный тип списка.Предположим, у меня есть список с атрибутом read-only=true или readonly class. Могу ли я отключить этот тип списка или нужно отключить весь список пользовательского интерфейса

Answer 1

Я проводил здесь какое-то тестирование, основываясь на найденном мной исследовании.Вот мое тестирование:

$(function() {
  var projects = [{
      value: "jquery",
      label: "jQuery",
      desc: "the write less, do more, JavaScript library",
      icon: "jquery_32x32.png"
    },
    {
      value: "jquery-ui",
      label: "jQuery UI",
      desc: "the official user interface library for jQuery",
      icon: "jqueryui_32x32.png"
    },
    {
      value: "sizzlejs",
      label: "Sizzle JS",
      desc: "a pure-JavaScript CSS selector engine",
      icon: "sizzlejs_32x32.png"
    }
  ];

  $("#project").autocomplete({
      minLength: 0,
      source: projects,
      focus: function(event, ui) {
        $("#project").val(ui.item.label);
        return false;
      },
      select: function(event, ui) {
        var keyCode = $.ui.keyCode;
        var proceed = true;
        switch (event.keyCode) {
          case keyCode.PAGE_UP:
          case keyCode.PAGE_DOWN:
          case keyCode.UP:
          case keyCode.DOWN:
            event.preventDefault();
            break;
          default:
            $("#project").val(ui.item.label);
            $("#project-id").val(ui.item.value);
            $("#project-description").html(ui.item.desc);
            $("#project-icon").attr("src", "https://jqueryui.com/resources/demos/autocomplete/images/" + ui.item.icon);
        }
        return false;
      }
    })
    .autocomplete("instance")._renderItem = function(ul, item) {
      return $("<li>")
        .append("<div>" + item.label + "<br>" + item.desc + "</div>")
        .appendTo(ul);
    };

  $(document).on("keydown.autocomplete, keypress.autocomplete", function(e) {
    var that = $(e.target).autocomplete("instance");
    var keyCode = $.ui.keyCode;
    var proceed = true;
    switch (e.keyCode) {
      case keyCode.PAGE_UP:
      case keyCode.PAGE_DOWN:
      case keyCode.UP:
      case keyCode.DOWN:
        console.log(e.key + " triggered");
        proceed = false;
        e.preventDefault();
        break;
    }
    return proceed;
  });
});

input {
  height: 60px;
  width: 400px;
  margin: 10px;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}

#project-label {
  display: block;
  font-weight: bold;
  margin-bottom: 1em;
}

#project-icon {
  float: left;
  height: 32px;
  width: 32px;
}

#project-description {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="https://jqueryui.com/resources/demos/autocomplete/images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>

Это должно предотвратить выбор при использовании стрелки вверх или стрелки вниз для автозаполнения.Я вижу, что это вызвано, но события все еще перемещают выделение.

Я знаю, что это не слишком полезно, поэтому продолжит работать.