fix(search): better results display + enable wildcards

fix #537 fix #447
compodoc · Apr 22, 2018 · 43c6d5d · 43c6d5d
1 parent db48253
commit 43c6d5d
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 33 deletions.
diff --git a/src/resources/js/search/search-lunr.js b/src/resources/js/search/search-lunr.js
@@ -23,7 +23,7 @@
             d = new promise.Promise();
 
         if (this.index) {
-            results = $.map(this.index.search(q), function(result) {
+            results = $.map(this.index.search('*' + q + '*'), function(result) {
                 var doc = that.store[result.ref];
 
                 return {

diff --git a/src/resources/js/search/search.js b/src/resources/js/search/search.js
@@ -32,6 +32,7 @@
 
     function displayResults(res) {
         var noResults = res.count == 0;
+        var groups = {};
         $searchResults.toggleClass('no-results', noResults);
 
         // Clear old results
@@ -41,46 +42,74 @@
         $searchResultsCount.text(res.count);
         $searchQuery.text(res.query);
 
-        // Create an <li> element for each result
+        // Group result by context
         res.results.forEach(function(res) {
+            var context = res.title.split(' - ')[0];
+            if (typeof groups[context] === 'undefined') {
+                groups[context] = {
+                    results: [res]
+                }
+            } else {
+                groups[context].results.push(res)
+            }
+        });
+
+        var sortedGroups = Object.keys(groups).sort();
+
+        for (var i = 0; i < sortedGroups.length; i++) {
+            var property = sortedGroups[i];
+
             var $li = $('<li>', {
-                'class': 'search-results-item'
-            }),
-
-            $title = $('<h3>'),
-
-            content = res.body.trim(),
-
-            link = '';
-
-            switch (COMPODOC_CURRENT_PAGE_DEPTH) {
-                case 0:
-                    link = './';
-                    break;
-                case 1:
-                case 2:
-                case 3:
-                case 4:
-                case 5:
-                    link = '../'.repeat(COMPODOC_CURRENT_PAGE_DEPTH);
-                    break;
+                'class': 'search-results-group'
+            });
+            var finalPropertyLabel = '';
+            var propertyLabels = property.split('-');
+
+            if (propertyLabels.length === 2 && propertyLabels[0] !== 'miscellaneous' && propertyLabels[0] !== 'additional') {
+                finalPropertyLabel = propertyLabels[0].charAt(0).toUpperCase() + propertyLabels[0].substring(1) + ' - ' + propertyLabels[1].charAt(0).toUpperCase() + propertyLabels[1].substring(1) + ' (' + groups[property].results.length + ')';
+            } else if (propertyLabels[0] === 'additional') {
+                finalPropertyLabel = 'Additional pages' + ' (' + groups[property].results.length + ')'
+            } else {
+                finalPropertyLabel = propertyLabels[0].charAt(0).toUpperCase() + propertyLabels[0].substring(1) + ' (' + groups[property].results.length + ')'
             }
+            var $groupTitle = $('<h3>', {
+                'text': finalPropertyLabel
+            });
+            $groupTitle.appendTo($li);
 
-            var $link = $('<a>', {
-                'href': link + res.url,
-                'text': res.title
+            var $ulResults = $('<ul>', {
+                'class': 'search-results-list'
             })
 
-            if (content.length > MAX_DESCRIPTION_SIZE) {
-                content = content.slice(0, MAX_DESCRIPTION_SIZE).trim()+'...';
-            }
-            var $content = $('<p>').html(content);
+            groups[property].results.forEach(function(res) {
+                var link = '';
+                var $liResult = $('<li>', {
+                    'class': 'search-results-item'
+                });
+                switch (COMPODOC_CURRENT_PAGE_DEPTH) {
+                    case 0:
+                        link = './';
+                        break;
+                    case 1:
+                    case 2:
+                    case 3:
+                    case 4:
+                    case 5:
+                        link = '../'.repeat(COMPODOC_CURRENT_PAGE_DEPTH);
+                        break;
+                };
+                var finalResLabel = res.title.split(' - ')[1].charAt(0).toUpperCase() + res.title.split(' - ')[1].substring(1);
+                var $link = $('<a>', {
+                    'href': link + res.url,
+                    'text': finalResLabel
+                });
+                $link.appendTo($liResult);
+                $liResult.appendTo($ulResults);
+            });
+            $ulResults.appendTo($li);
 
-            $link.appendTo($title);
-            $title.appendTo($li);
-            $content.appendTo($li);
             $li.appendTo($searchList);
-        });
+        }
     }
 
     function launchSearch(q) {

diff --git a/src/resources/styles/compodoc.css b/src/resources/styles/compodoc.css
@@ -530,6 +530,20 @@ code {
   background-color: rgba(255, 220, 0, 0.4);
   font-style: normal;
 }
+.search-results-item {
+    margin-bottom: 1rem !important;
+    margin-top: 1rem;
+    padding-bottom: 0 !important;
+}
+.search-results-item a {
+    font-size: 18px;
+}
+.search-results-group, .search-results-group .search-results-list {
+    margin-bottom: 0 !important;
+}
+.search-results-group h3 {
+    margin-top: 10px;
+}
 
 .jsdoc-params {
     list-style: square;