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

jQuery UI Autocomplete custom display, how to focus sub children instead of first level children?

本文关键字：一级 何关注 UI 显示 自定义 jQuery      更新时间：2023-09-26

我正在尝试为jQuery UI Autocomplete使用一个自定义模板，其中可选择的子元素不仅仅是第一级<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>

如果我正确理解你的问题，你想从不同的类别自动完成。以下是JQuery UI自动完成的类别示例：

  $(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">

相关文章：