* search chapter by click chapter name.

docs/2/css/doc.css

@@ -460,6 +460,35 @@ body {
 #grid .chapter-heading > h4 {
   margin-bottom: 15px;
 }
+#grid .chapter-heading > h4 > .name {
+  cursor: pointer;
+}
+#grid .chapter-heading > h4 > .name:after {
+  position: relative;
+  left: -10px;
+  display: inline-block;
+  margin-left: 5px;
+  font-family: ZenIcon;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  content: '\e6dd';
+  opacity: 0;
+  -webkit-transition: opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition: opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+          transition: opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+#grid .chapter-heading > h4 > .name:hover:after {
+  left: 0;
+  opacity: 1;
+}
 #grid .card {
   display: none;
   margin-bottom: 10px;
@@ -853,7 +882,9 @@ body {
 #grid .chapter[data-accent="blue"] .color-accent {
   color: #00acc1;
 }
-#grid .chapter[data-accent="blue"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+#grid .chapter[data-accent="blue"] .card[data-target="external"] > .card-heading > h5 > a:after {
+  position: relative;
+  left: -10px;
   display: inline-block;
   margin-left: 5px;
   font-family: ZenIcon;
@@ -864,11 +895,27 @@ body {
   line-height: 1;
   text-transform: none;
   content: '\e684';
+  opacity: 0;
+  -webkit-transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition:      -o-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+          transition:         transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+  -webkit-transform: scale(.5);
+      -ms-transform: scale(.5);
+       -o-transform: scale(.5);
+          transform: scale(.5);
 
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#grid .chapter[data-accent="blue"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  left: 0;
+  opacity: 1;
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+       -o-transform: scale(1);
+          transform: scale(1);
+}
 #grid .chapter[data-accent="primary"] .chapter-heading {
   color: #3280fc;
 }
@@ -929,7 +976,9 @@ body {
 #grid .chapter[data-accent="primary"] .color-accent {
   color: #3280fc;
 }
-#grid .chapter[data-accent="primary"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+#grid .chapter[data-accent="primary"] .card[data-target="external"] > .card-heading > h5 > a:after {
+  position: relative;
+  left: -10px;
   display: inline-block;
   margin-left: 5px;
   font-family: ZenIcon;
@@ -940,11 +989,27 @@ body {
   line-height: 1;
   text-transform: none;
   content: '\e684';
+  opacity: 0;
+  -webkit-transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition:      -o-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+          transition:         transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+  -webkit-transform: scale(.5);
+      -ms-transform: scale(.5);
+       -o-transform: scale(.5);
+          transform: scale(.5);
 
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#grid .chapter[data-accent="primary"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  left: 0;
+  opacity: 1;
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+       -o-transform: scale(1);
+          transform: scale(1);
+}
 #grid .chapter[data-accent="yellow"] .chapter-heading {
   color: #fd9927;
 }
@@ -1005,7 +1070,9 @@ body {
 #grid .chapter[data-accent="yellow"] .color-accent {
   color: #fd9927;
 }
-#grid .chapter[data-accent="yellow"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+#grid .chapter[data-accent="yellow"] .card[data-target="external"] > .card-heading > h5 > a:after {
+  position: relative;
+  left: -10px;
   display: inline-block;
   margin-left: 5px;
   font-family: ZenIcon;
@@ -1016,11 +1083,27 @@ body {
   line-height: 1;
   text-transform: none;
   content: '\e684';
+  opacity: 0;
+  -webkit-transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition:      -o-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+          transition:         transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+  -webkit-transform: scale(.5);
+      -ms-transform: scale(.5);
+       -o-transform: scale(.5);
+          transform: scale(.5);
 
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#grid .chapter[data-accent="yellow"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  left: 0;
+  opacity: 1;
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+       -o-transform: scale(1);
+          transform: scale(1);
+}
 #grid .chapter[data-accent="green"] .chapter-heading {
   color: #2fb936;
 }
@@ -1081,7 +1164,9 @@ body {
 #grid .chapter[data-accent="green"] .color-accent {
   color: #2fb936;
 }
-#grid .chapter[data-accent="green"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+#grid .chapter[data-accent="green"] .card[data-target="external"] > .card-heading > h5 > a:after {
+  position: relative;
+  left: -10px;
   display: inline-block;
   margin-left: 5px;
   font-family: ZenIcon;
@@ -1092,11 +1177,27 @@ body {
   line-height: 1;
   text-transform: none;
   content: '\e684';
+  opacity: 0;
+  -webkit-transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition:      -o-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+          transition:         transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+  -webkit-transform: scale(.5);
+      -ms-transform: scale(.5);
+       -o-transform: scale(.5);
+          transform: scale(.5);
 
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#grid .chapter[data-accent="green"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  left: 0;
+  opacity: 1;
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+       -o-transform: scale(1);
+          transform: scale(1);
+}
 #grid .chapter[data-accent="red"] .chapter-heading {
   color: #ee4e2f;
 }
@@ -1157,7 +1258,9 @@ body {
 #grid .chapter[data-accent="red"] .color-accent {
   color: #ee4e2f;
 }
-#grid .chapter[data-accent="red"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+#grid .chapter[data-accent="red"] .card[data-target="external"] > .card-heading > h5 > a:after {
+  position: relative;
+  left: -10px;
   display: inline-block;
   margin-left: 5px;
   font-family: ZenIcon;
@@ -1168,11 +1271,27 @@ body {
   line-height: 1;
   text-transform: none;
   content: '\e684';
+  opacity: 0;
+  -webkit-transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition:      -o-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+          transition:         transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+  -webkit-transform: scale(.5);
+      -ms-transform: scale(.5);
+       -o-transform: scale(.5);
+          transform: scale(.5);
 
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#grid .chapter[data-accent="red"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  left: 0;
+  opacity: 1;
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+       -o-transform: scale(1);
+          transform: scale(1);
+}
 #grid .chapter[data-accent="brown"] .chapter-heading {
   color: #bd7b46;
 }
@@ -1233,7 +1352,9 @@ body {
 #grid .chapter[data-accent="brown"] .color-accent {
   color: #bd7b46;
 }
-#grid .chapter[data-accent="brown"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+#grid .chapter[data-accent="brown"] .card[data-target="external"] > .card-heading > h5 > a:after {
+  position: relative;
+  left: -10px;
   display: inline-block;
   margin-left: 5px;
   font-family: ZenIcon;
@@ -1244,11 +1365,27 @@ body {
   line-height: 1;
   text-transform: none;
   content: '\e684';
+  opacity: 0;
+  -webkit-transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition:      -o-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+          transition:         transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+  -webkit-transform: scale(.5);
+      -ms-transform: scale(.5);
+       -o-transform: scale(.5);
+          transform: scale(.5);
 
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#grid .chapter[data-accent="brown"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  left: 0;
+  opacity: 1;
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+       -o-transform: scale(1);
+          transform: scale(1);
+}
 #grid .chapter[data-accent="purple"] .chapter-heading {
   color: #8666b8;
 }
@@ -1309,7 +1446,9 @@ body {
 #grid .chapter[data-accent="purple"] .color-accent {
   color: #8666b8;
 }
-#grid .chapter[data-accent="purple"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+#grid .chapter[data-accent="purple"] .card[data-target="external"] > .card-heading > h5 > a:after {
+  position: relative;
+  left: -10px;
   display: inline-block;
   margin-left: 5px;
   font-family: ZenIcon;
@@ -1320,11 +1459,27 @@ body {
   line-height: 1;
   text-transform: none;
   content: '\e684';
+  opacity: 0;
+  -webkit-transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition:      -o-transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+          transition:         transform .3s cubic-bezier(.175, .885, .32, 1), opacity .3s cubic-bezier(.175, .885, .32, 1), left .3s cubic-bezier(.175, .885, .32, 1);
+  -webkit-transform: scale(.5);
+      -ms-transform: scale(.5);
+       -o-transform: scale(.5);
+          transform: scale(.5);
 
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#grid .chapter[data-accent="purple"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  left: 0;
+  opacity: 1;
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+       -o-transform: scale(1);
+          transform: scale(1);
+}
 body.input-query-focus #grid .card.choosed:before {
   right: 0;
 }

src/js/doc.js

@@ -562,9 +562,13 @@
         $.each(keyString.split(' '), function(i, key){
             key = $.trim(key).toLowerCase();
             var keyOption = {origin: key};
-            if(key.startsWith('#')) {
+            if(key.startsWith('@')) {
                 keyOption.type = 'id';
-                keyOption.val = key.substr(1);
+                keyOption.chapter = key.substr(1);
+                keyOption.val = keyOption.chapter;
+            } else if(key.startsWith('#')) {
+                keyOption.type = 'id';
+                keyOption.val = key.substr(2);
             } else if(key.startsWith('icon-') || key.startsWith('icon:')) {
                 keyOption.type = 'icon';
                 keyOption.val = key.substr(5);
@@ -1078,6 +1082,8 @@
                 $card.toggleClass('open');
             }
             stopPropagation(e);
+        }).on('click', '.chapter-heading > h4 > .name', function(){
+            $queryInput.focus().val('@' + $(this).closest('.chapter').data('id')).change();
         }).on('click', '.card', function(e){
             chooseSection($(this), true);
             stopPropagation(e);

src/less/doc.less

@@ -89,12 +89,25 @@
     color: @color;
   }
 
-  .card[data-target="external"] > .card-heading.hover {
+  .card[data-target="external"] > .card-heading {
     > h5 > a:after {
       display: inline-block;
       margin-left: 5px;
       .icon-zenicon();
       content: @icon-external-link;
+      opacity: 0;
+      .scale(.5);
+      left: -10px;
+      position: relative;
+      .transition-fast(transform; opacity; left);
+    }
+
+    &.hover {
+      > h5 > a:after {
+        left: 0;
+        opacity: 1;
+        .scale(1);
+      }
     }
   }
 }
@@ -652,6 +665,26 @@ body {
   .chapter-heading {
     > h4 {
       margin-bottom: 15px;
+
+      > .name {
+        cursor: pointer;
+
+        &:after {
+          .icon-zenicon();
+          display: inline-block;
+          margin-left: 5px;
+          content: @icon-double-angle-right;
+          position: relative;
+          left: -10px;
+          opacity: 0;
+          .transition-fast(opacity; left);
+        }
+
+        &:hover:after {
+          left: 0;
+          opacity: 1;
+        }
+      }
     }
   }