jQuery UI Autocomplete benutzerdefinierte Anzeige, wie Unter Kinder anstelle der ersten Ebene Kinder zu konzentrieren?

Question

Ich versuche, eine benutzerdefinierte Vorlage für jQuery UI Autocomplete verwenden, wo die auswählbaren Kinder sind nicht nur erste Ebene <li> Kind Elemente, verschachtelte sie 5 Elemente tiefer.

Wie mache ich nur bestimmte Elemente, .search-result-single-item.ui-menu-item fokussierbar/wählbar über die Pfeiltasten und Mausinteraktionen?

Egal, was ich versuche, so scheint es nur zu konzentrieren/1. Ebene Kinder wählen innerhalb ul.ui-autocomplete

Hier ist eine Probe Vorlage von dem, was mein Innen zur automatischen Vervollständigung führt wie folgt aussehen:

<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

Wenn ich Ihre Frage richtig verstehe, möchten Sie aus verschiedenen Kategorien automatisch vervollständigen. Hier ist ein einfaches Beispiel, nach dem 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">