1. $.widget('custom.catcomplete', $.ui.autocomplete, {
       _renderMenu: function(ul, items) {
           var that = this, currentCategory = '';
           items.sort(function (a,b){
               return a.category > b.category;
           });
           $.each(items, function(index, item){
               if (item.category != currentCategory ) {
                   //that._renderCategory(ul, item);
                   ul.append("<li>" + item.category + "</li>");
                   currentCategory = item.category;
               }
               that._renderItemData(ul, item);
           });
       },
       _renderCategory: function(ul, item) {
           return $('<li>').html(item.category).appendTo(ul);
       },
       _renderItem: function(ul, item) {
           item = $('<li>').append($('<a>').append($('<img>').src(item.avatar)).append($('<h3>').html(item.text))).appendTo(ul);
           return item
       }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
2. })(jQuery);
3. $(function() {
       $( "#autocomplete" ).catcomplete({
           source: function( request, response ) {
               $.ajax({
                   url: '/autocomplete',
                   minLength: 4,
                   data: {
                       q: request.term
                   }
               });
           }
       });
   });
   
   
   
   
   
   
   
   
   
   
   
   
   

First of all it's not launching the query. But even if I embed my data as static in the code, it's not drawing the dropdown menu. Any help here?

1. <form id="search" action="/search/" style="opacity: 1;">
2.     <div class="ui-widget">
3.         <input type="search" name="search field q" placeholder="{% trans 'Search for people, projects, departments' %} ..." class="autocomplete-me">
4.     </div>
5.     <div id="autocomplete" class="focus"></div>
6.     <input type="submit" name="submit search" value="{% trans 'Search' %}">
7. </form>

1. {"results": [{"category": "Departments", "first_name": "", "last_name": "", "url": "/en/department-name/", "text": "Department name", "avatar": null, "position": ""}, {"category": "People", "first_name": "Santa", "last_name": "Klaus", "url": "/en/staff/1/", "text": "Santa Klaus", "avatar": "/static/img/generic-avatar.png", "position": "manager"}]}