diff --git a/config/jsdoc/api/template/static/scripts/main.js b/config/jsdoc/api/template/static/scripts/main.js
index e9d7e604b5..d923dedccb 100644
--- a/config/jsdoc/api/template/static/scripts/main.js
+++ b/config/jsdoc/api/template/static/scripts/main.js
@@ -29,7 +29,7 @@ $(function () {
   var getSearchWeight = function (searchTerm, $matchedItem) {
     let weight = 0;
     // We could get smarter on the weight here
-    if ($matchedItem.data('shortname') === searchTerm) {
+    if ($matchedItem.data('name') === searchTerm) {
       weight++;
     }
     return weight;
@@ -48,7 +48,7 @@ $(function () {
     .replace('module-', 'module:')
     .replace(/_/g, '/')
     .replace(/-/g, '~');
-  var $currentItem = $('.navigation .item[data-name*="' + longname.toLowerCase() + '"]:eq(0)');
+  var $currentItem = $('.navigation .item[data-longname="' + longname + '"]:eq(0)');
 
   if ($currentItem.length) {
     $currentItem
diff --git a/config/jsdoc/api/template/tmpl/navigation.tmpl b/config/jsdoc/api/template/tmpl/navigation.tmpl
index 90e7e854e2..104c8e98ef 100644
--- a/config/jsdoc/api/template/tmpl/navigation.tmpl
+++ b/config/jsdoc/api/template/tmpl/navigation.tmpl
@@ -15,11 +15,11 @@ function getItemCssClass(type) {
 }
 
 const printList = v => { ?>
-                    <li data-name="<?js= v.longname.toLowerCase() ?>"><?js
+                    <li data-name="<?js= toShortName(v.name).toLowerCase() ?>"><?js
 }
 const printListWithStability = v => {
     const cls = v.stability && v.stability !== 'stable' ? ' class="unstable"' : ''; ?>
-                    <li data-name="<?js= v.longname.toLowerCase() ?>"<?js= cls ?>><?js
+                    <li data-name="<?js= toShortName(v.name).toLowerCase() ?>"<?js= cls ?>><?js
 }
 
 function listContent(item, title, listItemPrinter) {
@@ -42,7 +42,7 @@ function listContent(item, title, listItemPrinter) {
     </div>
     <ul class="list"><?js
         this.nav.forEach(function (item) { ?>
-        <li class="item" data-name="<?js= item.longname.toLowerCase() ?>" data-shortname="<?js= item.name.toLowerCase() ?>">
+        <li class="item" data-longname="<?js= item.longname ?>" data-name="<?js= item.name.toLowerCase() ?>">
             <span class="title">
                 <span class="glyphicon <?js= getItemCssClass(item.type) ?> toggle"></span>
                 <?js= self.linkto(item.longname, item.prettyname) ?>