jQuery UI Visualizzazione personalizzata del completamento automatico, come mettere a fuoco i bambini secondari invece dei bambini di primo livello?

Question

Sto tentando di utilizzare un modello personalizzato per jQuery UI Autocomplete, in cui i bambini selezionabili non sono solo elementi di primo livello <li>, nidificati 5 elementi più profondi.

Come faccio a rendere solo determinati elementi, .search-result-single-item.ui-menu-item attivabili/selezionabili tramite i tasti freccia e le interazioni del mouse?

Non importa quello che provo, sembra concentrarsi solo/selezionare di 1 ° livello bambini all'interno ul.ui-autocomplete

Ecco un modello di esempio di quali risultati mia autocomplete interna assomigliare:

<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

Se ho compreso correttamente la tua domanda, vuoi completarla automaticamente da diverse categorie. Ecco un semplice esempio, in seguito alla 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">