自動完成Jquery UI集成的類別

Question

我想向自動填充小部件的搜索結果中添加類別，例如http://jqueryui.com/autocomplete/#categories，但我無法弄清楚如何將代碼集成到下面的工作代碼中。

<script> 
     $(function() { 
      function split(val) { 
       return val.split(/,\s*/); 
      } 
      function extractLast(term) { 
       return split(term).pop(); 
      } 

      $("#search") 
       // don't navigate away from the field on tab when selecting an item 
       .bind("keydown", function(event) { 
       if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("ui-autocomplete").menu.active) { 
        event.preventDefault(); 
       } 
       }) 
       .autocomplete({ 
       source: function(request, response) { 
        console.log(request); 
        console.log(response); 
        console.log(extractLast(request.term)); 
        $.getJSON("http://192.168.33.10/app_dev.php/search/query/" + extractLast(request.term), { 
        term: extractLast(request.term) 
        }, response); 
       }, 
       search: function() { 
        // custom minLength 
        var term = extractLast(this.value); 
        if (term.length < 2) { 
        return false; 
        } 
       }, 
       focus: function() { 
        // prevent value inserted on focus 
        return false; 
       }, 
       select: function(event, ui) { 
        window.location = ("http://192.168.33.10/" + ui.item.link); 
       } 
       }); 
     }); 
    </script> 

    <div class="ui-widget"> 
     <label for="search">Search</label> 
     <input type="text" id="search" /> 
    </div> 

Answer 1

假設你在你的json中返回item.category那麼我認爲這應該讓你非常接近你想要的位置。 - 從樣本中抓取CSS或創建自己的CSS。

• 添加自定義catcomplete爲rendermenu東西
• 用它來代替自動完成

代碼：

$(function() { 
    $.widget("custom.catcomplete", $.ui.autocomplete, { 
     _renderMenu: function (ul, items) { 
      var that = this, 
       currentCategory = ""; 
      $.each(items, function (index, item) { 
       if (item.category != currentCategory) { 
        ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
        currentCategory = item.category; 
       } 
       that._renderItemData(ul, item); 
      }); 
     } 
    }); 

    function split(val) { 
     return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
     return split(term).pop(); 
    } 

    $("#search") 
    // don't navigate away from the field on tab when selecting an item 
    .bind("keydown", function (event) { 
     if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) { 
      event.preventDefault(); 
     } 
    }) 
     .catcomplete({ 
     source: function (request, response) { 
      console.log(request); 
      console.log(response); 
      console.log(extractLast(request.term)); 
      $.getJSON("http://192.168.33.10/app_dev.php/search/query/" + extractLast(request.term), { 
       term: extractLast(request.term) 
      }, response); 
     }, 
     search: function() { 
      // custom minLength 
      var term = extractLast(this.value); 
      if (term.length < 2) { 
       return false; 
      } 
     }, 
     focus: function() { 
      // prevent value inserted on focus 
      return false; 
     }, 
     select: function (event, ui) { 
      window.location = ("http://192.168.33.10/" + ui.item.link); 
     } 
    }); 
});