Question

我试图为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>

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

jQuery UI自动完成自定义显示，如何聚焦子孩而不是第一级孩子？

1 个答案: