chore(docs): display search result areas in a fixed order

docs/app/src/search.js

@@ -11,7 +11,15 @@ angular.module('search', [])
     var MIN_SEARCH_LENGTH = 2;
     if(q.length >= MIN_SEARCH_LENGTH) {
       docsSearch(q).then(function(hits) {
-        var results = {};
+        // Make sure the areas are always in the same order
+        var results = {
+          api: [],
+          guide: [],
+          tutorial: [],
+          error: [],
+          misc: []
+        };
+
         angular.forEach(hits, function(hit) {
           var area = hit.area;
 

docs/config/templates/indexPage.template.html

@@ -147,7 +147,7 @@
         <div class="search-results-container" ng-show="hasResults">
           <div class="container">
             <div class="search-results-frame">
-              <div ng-repeat="(key, value) in results" class="search-results-group" ng-class="colClassName + ' col-group-' + key">
+              <div ng-repeat="(key, value) in results track by key" class="search-results-group" ng-class="colClassName + ' col-group-' + key" ng-show="value.length > 0">
                 <h4 class="search-results-group-heading">{{ key }}</h4>
                 <ul class="search-results">
                   <!-- Do not insert a line break between li and a. Chrome will insert an actual line-break, which breaks the list item view.