Hiển thị tùy chỉnh jQuery Auto Autocomplete, làm thế nào để tập trung trẻ em thay vì trẻ em cấp đầu tiên?

Question

Tôi đang cố gắng sử dụng mẫu tùy chỉnh cho jQuery UI Autocomplete, trong đó các trẻ em có thể chọn không chỉ là các phần tử con cấp 1 <li>, chúng lồng nhau 5 phần tử sâu hơn.

Làm cách nào để chỉ tạo các yếu tố nhất định, .search-result-single-item.ui-menu-item có thể chọn tiêu điểm/có thể chọn qua các phím mũi tên và tương tác chuột?

Không có vấn đề gì tôi cố gắng, nó dường như chỉ tập trung/chọn 1st level trẻ em trong ul.ui-autocomplete

Đây là một mẫu mẫu những gì kết quả autocomplete bên trong của tôi nhìn như:

<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

Nếu tôi hiểu chính xác câu hỏi của bạn, bạn muốn tự động hoàn thành từ các danh mục khác nhau. Dưới đây là một ví dụ đơn giản, sau khi 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">