Autocomplete manual search to first result on submit

2 files changed, 22 insertions, 11 deletions

diff --git a/docs/public/js/manual-search.js b/docs/public/js/manual-search.js
index c2b13dec..eb7cff89 100644
--- a/docs/public/js/manual-search.js
+++ b/docs/public/js/manual-search.js
@@ -1,4 +1,7 @@
-var section_names = function(q, cb) {
+var section_names = function(q) {
+  if (!q) {
+    return [];
+  }
   var matches = [];
   q = q.toLowerCase();
   $.each(section_map, function(k, v) {
@@ -10,23 +13,31 @@ var section_names = function(q, cb) {
     // shortest to longest
     return a.length - b.length;
   });
-  cb(matches);
+  return matches;
+}
+var section_names_cb = function(q, cb) {
+  cb(section_names(q));
 }
-var go_to_section = function(section) {
-  if (section in section_map) {
-    location.hash = '#' + section_map[section];
+var go_to_section = function() {
+  query = $('#searchbox').val();
+  results = section_names(query);
+  if (results.length == 0) {
+    return;
+  }
+  result = results[0];
+  location.hash = '#' + section_map[result];
+  if (result != query) {
+    $('#searchbox').val(result);
   }
 }
 $(function(){
   $('#searchbox').typeahead(
     {hint: false, highlight: true, minLength: 1},
-    {name: "contents", source: section_names, limit: 6}
+    {name: "contents", source: section_names_cb, limit: 6}
   ).on('typeahead:selected', function(e, data) {
-    go_to_section($(this).val());
-  });
-  $('#searchbox').change(function() {
-    go_to_section($(this).val());
+    go_to_section();
   });
+  $('#searchbox').change(go_to_section);
 });
 // add "Run" button to execute examples on jqplay.org
 $(function() {
diff --git a/docs/templates/manual.liquid b/docs/templates/manual.liquid
index 59505a95..f1d7985a 100644
--- a/docs/templates/manual.liquid
+++ b/docs/templates/manual.liquid
@@ -16,7 +16,7 @@
               </li>
             {% endfor %}
           </ul>
-          <form class="form-group">
+          <form class="form-group" onsubmit="go_to_section(); return false;">
             <input type="text"
                   class="form-control"
                   placeholder="Search"