Add categorized search results.

Author: coke

html/css/style.css

@@ -199,6 +199,14 @@ td p {
     color: #000000;
 }
 
+.ui-autocomplete-category {
+    font-weight: bold;
+    font-style: italic;
+    background-color: #DAFE8C;
+    padding: 2px 5px;
+    line-height: 1.5;
+}
+
 .menu {
     border: none;
     text-align: center;

htmlify.p6

@@ -587,9 +587,9 @@ sub write-search-file () {
     my $items = $*DR.get-kinds.map(-> $kind {
         $*DR.lookup($kind, :by<kind>).categorize({escape .name})\
             .pairs.sort({.key}).map: -> (:key($name), :value(@docs)) {
-                qq[[\{ label: "{
+                qq[[\{ category: "{
                     ( @docs > 1 ?? $kind !! @docs.[0].subkinds[0] ).wordcase
-                }: $name", value: "$name", url: "{@docs.[0].url}" \}]] #"
+                }", value: "$name", url: "{@docs.[0].url}" \}]] #"
             }
     }).flat.join(",\n");
     spurt("html/js/search.js", $template.subst("ITEMS", $items));

template/search_template.js

@@ -1,5 +1,39 @@
 $(function(){
-  $("#query").autocomplete({
+  $.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 = "";
+      function sortBy(a, b) {
+        if (a.category.toLowerCase() < b.category.toLowerCase()) {
+          return -1;
+        } else if (a.category.toLowerCase() > b.category.toLowerCase()) {
+          return 1;
+        } else if (a.value.toLowerCase() < b.value.toLowerCase()) {
+          return -1;
+        } else if (a.value.toLowerCase() > b.value.toLowerCase()) {
+          return 1;
+        } else {
+          return 0;
+        }
+      }
+      $.each( items.sort(sortBy), 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 );
+        }
+      });
+    }
+  });
+  $("#query").catcomplete({
       response: function( e, ui ) {
         if ( ! ui.content.length ) { $('#search').addClass(   'not-found') }
         else {                       $('#search').removeClass('not-found') }