Improves no results notice and removes highlight and notice on search field blur

Signed-off-by: Christopher Rogers <chrissrogers@gmail.com>

source/javascripts/app/search.js

@@ -1,6 +1,8 @@
 (function (global) {
 
   var $global = $(global);
+  var content, searchInfo;
+  var highlightOpts = { element: 'span', className: 'search-highlight' };
   var index = lunr(function () {
     this.ref('id');
     this.field('title', { boost: 10 });
@@ -14,7 +16,7 @@
   function populate () {
     $('h1').each(function () {
       var title = $(this);
-      var body = title.nextUntil('h1, .search-nothing-found');
+      var body = title.nextUntil('h1');
       var wrapper = $('<section id="section-' + title.prop('id') + '"></section>');
 
       title.after(wrapper.append(body));
@@ -30,33 +32,38 @@
   }
 
   function bind () {
-    $('#input-search').on('keyup', search);
+    content = $('.content');
+    searchInfo = $('.search-info');
+    $('#input-search')
+      .on('keyup', search)
+      .on('focus', active)
+      .on('blur', inactive);
   }
 
   function search (event) {
-    var $sections = $('section, #toc .tocify-header');
+    var sections = $('section, #toc .tocify-header');
-    var $content = $('.content');
-    var opts = { element: 'span', className: 'search-highlight' };
 
-    $content.unhighlight(opts);
+    searchInfo.hide();
+    unhighlight();
 
-    // esc clears the field
+    // ESC clears the field
     if (event.keyCode === 27) this.value = '';
 
     if (this.value) {
-      var items = index.search(this.value);
+      sections.hide();
-      $sections.hide();
+      var results = index.search(this.value);
-      if (items.length) {
+      if (results.length) {
-        items.forEach(function (item) {
+        $.each(results, function (index, item) {
           $('#section-' + item.ref).show();
           $('.tocify-item[data-unique=' + item.ref + ']').closest('.tocify-header').show();
         });
-        $content.highlight(this.value, opts);
+        highlight.call(this);
       } else {
-        $sections.filter('.search-nothing-found').show();
+        sections.show();
+        searchInfo.text('No Results Found for "' + this.value + '"').show();
       }
     } else {
-      $sections.show();
+      sections.show();
     }
 
     // HACK trigger tocify height recalculation
@@ -64,4 +71,21 @@
     $global.triggerHandler('resize');
   }
 
+  function active () {
+    search.call(this, {});
+  }
+
+  function inactive () {
+    unhighlight();
+    searchInfo.hide();
+  }
+
+  function highlight () {
+    if (this.value) content.highlight(this.value, highlightOpts);
+  }
+
+  function unhighlight () {
+    content.unhighlight(highlightOpts);
+  }
+
 })(window);

source/layouts/layout.erb

@@ -52,16 +52,12 @@ under the License.
       <% end %>
     </div>
     <div class="page-wrapper">
+      <div class="search-info"></div>
       <div class="content">
         <%= yield %>
         <% current_page.data.includes && current_page.data.includes.each do |include| %>
           <%= partial "includes/#{include}" %>
         <% end %>
-        <section class="search-nothing-found">
-          <aside class="search-info">
-            No results found
-          </aside>
-        </section>
       </div>
       <div class="dark-box">
         <% if language_tabs %>

source/stylesheets/screen.css.scss

@@ -243,6 +243,28 @@ html, body {
 ////////////////////////////////////////////////////////////////////////////////
 // This is all the stuff with the light background in the left half of the page
 
+.search-info {
+  margin-top: 0;
+  min-height: 52px;
+  padding: 1em 1.75em;
+  font-size: 1.2em;
+  font-weight: bold;
+  text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
+  background: $aside-notice-bg; // TODO: color
+  position: fixed;
+  z-index: 75;
+  display: none;
+
+  @include box-sizing(border-box);
+
+  &:before {
+    @extend %icon-search;
+    vertical-align: middle;
+    padding-right: 0.5em;
+    font-size: 1.2em;
+  }
+}
+
 .content {
   // to place content above the dark box
   position: relative;
@@ -419,20 +441,6 @@ html, body {
     aside.success:before {
       @extend %icon-ok-sign;
     }
-
-    aside.search-info {
-      font-size: 1.2em;
-      margin-top: 0;
-      height: 52px;
-      &:before {
-        @extend %icon-search;
-        font-size: 1.2em;
-      }
-    }
-
-    .search-nothing-found {
-      display: none;
-    }
   }
 }