JQuery UI Autocomplete custom display, how to focus child children instead of first-level children?

Question

I am trying to use a custom template for jQuery UI Autocomplete , where the selected children are not only the 1st level <li> children elements, they are nested 5 elements deeper .

How to make only certain elements , .search-result-single-item.ui-menu-item custom / selectable with the arrow keys and mouse?

No matter what I try, it seems that only the focus / choice of the 1st level children within ul.ui-autocomplete

Here is an example template of what my internal autocomplete results look like:

 <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

If I understand your question correctly, you want to autofill from different categories. Here is a simple example, following the example of a jQuery UI autocomplete example :

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