如何强制 JS 忽略一个 li 元素

Question

我已经实现jquery autocomplete

（这只是一个模拟真实代码的例子）

let availableTags = [   
      undefined,    // this is only a header and its results to undefined due to a lack of Id
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $('#tags').autocomplete({
            source: availableTags,
                                                    
              minLength: 0,
                        
              focus: function (event, ui) { 
                                              
                       if(!ui.item){ 

                          // add code here

                       }
                                                                                        
              },
                        
              select: function (event, ui) {                                            

                    //...    

              },
      })

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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 class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

ul 的第一个 li 元素只是一个标题（不是真正的 li 选项） ，因此我根本不希望它被选中。

我设法阻止了click events，但它仍然对其他事件“敏感” 像mouseenter mouseover 等等我可以使用键盘激活这些事件 keydown

如何强制JS 忽略第一个li 元素被触发 甚至不通过键盘？

编辑： 顺便说一句，我可以控制第一个li标签为div\span或 任何其他标签（请记住，该标签将包含在 ul 中）

EDIT-2： 标头只应显示以完全由没有 JS event（鼠标、键盘等）操作，并且标头应为 undefined 以匹配真实代码

Answer 1

您需要将数据定义为对象，category 和label 作为availableTags 数据数组中的属性；并且还需要实现您的自定义自动完成功能的_renderMenu。

$.widget("custom.mycomplete", $.ui.autocomplete, {
  _create: function () {
    this._super();
    this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
  },
  _renderMenu: function (ul, items) {
    var that = this,
      currentCategory = "";
    $.each(items, function (index, item) {
      var li;
      if (item.category != currentCategory) {
        ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
        currentCategory = item.category;
      }
      li = that._renderItemData(ul, item);
      if (item.category) {
        li.attr("aria-label", item.category + " : " + item.label);
      }
    });
  }
});

let availableTags = [
  { label: "AppleScript", category: "Langauges" },
  { label: "Asp", category: "Langauges" },
  { label: "BASIC", category: "Langauges" },
  { label: "C", category: "Langauges" },
  { label: "C++", category: "Langauges" },
  { label: "Clojure", category: "Langauges" },
  { label: "COBOL", category: "Langauges" },
  { label: "ColdFusion", category: "Langauges" },
  { label: "Erlang", category: "Langauges" },
  { label: "Fortran", category: "Langauges" },
  { label: "Groovy", category: "Langauges" },
  { label: "Haskell", category: "Langauges" },
  { label: "Java", category: "Langauges" },
  { label: "JavaScript", category: "Langauges" },
  { label: "Lisp", category: "Langauges" },
  { label: "Perl", category: "Langauges" },
  { label: "PHP", category: "Langauges" },
  { label: "Python", category: "Langauges" },
  { label: "Ruby", category: "Langauges" },
  { label: "Scala", category: "Langauges" },
  { label: "Scheme", category: "Langauges" }
];

$('#tags').mycomplete({
  source: availableTags,
  minLength: 0,
  focus: function (event, ui) {
    if (!ui.item) {
      //code goes here
    }
  },
  select: function (event, ui) {
    //code goes here
  }
});

.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .6em 0 .2em;
    line-height: 1.5;
  }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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 class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Answer 2

通过autocomplete("widget").addClass("whatever"); 向ul添加一些类，然后在css中添加pointer-events: none;

let availableTags = [
            "header",    // this is only a header and its results to undefined due to a lack of Id
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];

        $('#tags').autocomplete({
            source: availableTags,
            minLength: 0,
            focus: function (event, ui) {
                debugger

                if (!ui.item) {
                   // add code here
                }
            },
            select: function (event, ui) {
                //...
            },
        }).autocomplete("widget").addClass("whatever"); 

 ul.whatever li:first-child {
            background-color:red;
            pointer-events: none;
        }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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 class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Answer 3

您可以在 availableTags 中传递一个disabled 属性来指示是否应该选择它，并在自动完成调用的source() 方法中处理选择结果。

$(function() {
  var availableTags = [
    {value: "COBOL", disabled: false},
    {value: "JAVA", disabled: false},
    {value: "PHP", disabled: false},
    {value: "ReactJS", disabled: false},
    {value: "NodeJS", disabled: true},
    {value: "ActionScript", disabled: true},
  ];
  $("#tags").autocomplete({
    source: availableTags,
    select: function(event, ui) {
      if (ui.item.disabled) {
        alert('Please choose a valid option')
        //  suppress disabled items
        event.preventDefault();
      }
    },
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />

<input id="tags" />

View on JSFiddle