javascript - 禁用 jquery ui 自动完成的向上/向下箭头导航

Question

我添加了 jQuery 自动完成自定义类型。有向上/向下箭头键选择的自动完成列表。但我想禁用按键上的选择列表。 here is the code

我们可以只禁用特定列表类型吗？假设我有一些列表具有 read-only=true 属性或 readonly class。 我可以为这种列表类型禁用此功能还是需要为整个 ui 列表禁用

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>

这应该可以防止使用向上箭头或向下箭头进行自动完成选择。我可以看到它已触发，但事件仍在移动选择。

我知道这不是很有帮助，所以会继续努力。