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

【问题标题】：Disable navigate on up/down arrows for jquery ui autocomplete禁用jquery ui自动完成的向上/向下箭头导航
【发布时间】：2019-10-07 08:17:20
【问题描述】：

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

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

【问题讨论】：

.data("ui-autocomplete")._renderMenu: function( ul, items ) { var that = this; $.each( items, function( index, item ) { that._renderItemData( ul, item ); }); $( ul ).find( "li.readonly" ).addClass( "ui-state-disabled" ); } source-api.jqueryui.com/autocomplete/#method-_renderMenu
我怀疑您需要使用小部件工厂来构建您自己的自定义选项或导航功能。这样，当按下向上或向下箭头时，它会被忽略。
可能重复：stackoverflow.com/questions/13096571/…
@Twisty 你在说什么“嫌疑人”啊？
@Kumar 我在猜测你是如何做到这一点的。这是在我进行进一步测试之前。

标签： javascript jquery css jquery-ui autocomplete

【解决方案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>

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

我知道这没什么帮助，所以会继续努力。

【讨论】：