javascript - jQuery UI 自动完成自定义显示，如何关注子 child 而不是一级 child ？

Question

我正在尝试为 jQuery UI Autocomplete 使用自定义模板，其中可选择的 child 不仅仅是第一级<li>子元素，它们嵌套5 个元素更深。

如何只制作某些元素，.search-result-single-item.ui-menu-item可通过箭头键和鼠标交互聚焦/选择？

无论我尝试什么，它似乎只关注/选择 ul.ui-autocomplete 内的第一级 子级

这是我的内部自动完成结果的示例模板:

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0">
  <div class="search-mini-container">

    <div class="connecting-triangle">
      <div class="connecting-triangle-border"></div>
    </div>


    <table class="search-category">
      <tr>


        <td class="search-category-icon-container">
          <i class="fa fa-fw fa-lg fa-star text-custom-success"></i>
        </td>

        <td class="search-category-content">

          <div class="title-view-all-container">
            <div class="search-category-title text-custom-success">
              Search Category Name
            </div>
          </div>

          <div class="search-result-items">
            <div class="search-result-single-item ui-menu-item">
              Search Result #1
            </div>
            <div class="search-result-single-item ui-menu-item">
              Search Result #2
            </div>
          </div>

        </td>


      </tr>
    </table>
  </div>
</ul>

Answer 1

如果我对你的问题的理解正确，你想从不同的类别中自动完成。这是一个简单的例子，在 category example of JQuery UI Autocomplete 之后:

  $(function() {
    $.widget("custom.catcomplete", $.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);
          }
        });
      }
    });
    var data = [{
      label: "Groovy",
      category: "C-like"
    }, {
      label: "Java",
      category: "C-like"
    }, {
      label: "Perl",
      category: "C-like"
    }, {
      label: "Clojure",
      category: "Lisp"
    }, {
      label: "Scheme",
      category: "Lisp"
    }, {
      label: "Lisp",
      category: "Lisp"
    }, {
      label: "ActionScript",
      category: "Scripting"
    }, {
      label: "AppleScript",
      category: "Scripting"
    }, {
      label: "JavaScript",
      category: "Scripting"
    }, ];

    $("#search").catcomplete({
      delay: 0,
      source: data
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>

<label for="search">Search:</label>
<input id="search">