Display "No results" message when no search results found

no issue - add a "No results" element to the search dropdown on creation and show/hide it appropriately
TryGhost · Sep 2, 2015 · 580eaf0 · 580eaf0
1 parent 3002c1b
commit 580eaf0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/core/client/app/components/gh-search-input.js b/core/client/app/components/gh-search-input.js
@@ -117,13 +117,36 @@ export default Ember.Component.extend({
             this.get('_selectize').focus();
         },
 
+        onInit: function () {
+            var selectize = this.get('_selectize'),
+                html = '<div class="dropdown-empty-message">No results...</div>';
+
+            selectize.$empty_results_container = $(html);
+            selectize.$empty_results_container.hide();
+            selectize.$dropdown.append(selectize.$empty_results_container);
+        },
+
         onFocus: function () {
             this._setKeymasterScope();
             this.refreshContent();
         },
 
         onBlur: function () {
+            var selectize = this.get('_selectize');
+
             this._resetKeymasterScope();
+            selectize.$empty_results_container.hide();
+        },
+
+        onType: function () {
+            var selectize = this.get('_selectize');
+
+            if (!selectize.hasOptions) {
+                selectize.open();
+                selectize.$empty_results_container.show();
+            } else {
+                selectize.$empty_results_container.hide();
+            }
         }
     }
 

diff --git a/core/client/app/styles/components/selectize.css b/core/client/app/styles/components/selectize.css
@@ -209,7 +209,8 @@
     border-radius: 1px;
 }
 .selectize-dropdown [data-selectable],
-.selectize-dropdown .optgroup-header {
+.selectize-dropdown .optgroup-header,
+.selectize-dropdown .dropdown-empty-message {
     padding: 5px 8px;
 }
 .selectize-dropdown .optgroup:first-child .optgroup-header {

diff --git a/core/client/app/templates/components/gh-search-input.hbs b/core/client/app/templates/components/gh-search-input.hbs
@@ -8,7 +8,9 @@
     optionGroupPath="content.category"
     openOnFocus=false
     maxItems="1"
+    on-init="onInit"
     on-focus="onFocus"
     on-blur="onBlur"
+    update-filter="onType"
     select-item="openSelected"}}
 <button class="gh-nav-search-button" {{action "focusInput"}}><i class="icon-search"></i><span class="sr-only">Search</span></button>