UX: Let the user know the search is too short in the header menu

app/assets/javascripts/discourse/widgets/search-menu-results.js.es6

@@ -71,6 +71,10 @@ createWidget('search-menu-results', {
   tagName: 'div.results',
 
   html(attrs) {
+    if (attrs.invalidTerm) {
+      return h('div.no-results', I18n.t('search.too_short'));
+    }
+
     if (attrs.noResults) {
       return h('div.no-results', I18n.t('search.no_results'));
     }

app/assets/javascripts/discourse/widgets/search-menu.js.es6

@@ -8,7 +8,8 @@ const searchData = {
   results: {},
   noResults: false,
   term: undefined,
-  typeFilter: null
+  typeFilter: null,
+  invalidTerm: false
 };
 
 // Helps with debouncing and cancelling promises
@@ -45,8 +46,11 @@ const SearchHelper = {
       searchData.noResults = true;
       searchData.results = [];
       searchData.loading = false;
+      searchData.invalidTerm = true;
+
       widget.scheduleRerender();
     } else {
+      searchData.invalidTerm = false;
       this._activeSearch = searchForTerm(term, { typeFilter, searchContext, fullSearchUrl });
       this._activeSearch.then(content => {
         searchData.noResults = content.resultTypes.length === 0;
@@ -98,7 +102,8 @@ export default createWidget('search-menu', {
     } else {
       results.push(this.attach('search-menu-results', { term: searchData.term,
                                                         noResults: searchData.noResults,
-                                                        results: searchData.results }));
+                                                        results: searchData.results,
+                                                        invalidTerm: searchData.invalidTerm }));
     }
 
     return results;
@@ -130,13 +135,9 @@ export default createWidget('search-menu', {
 
   triggerSearch() {
     searchData.noResults = false;
-    if (isValidSearchTerm(searchData.term)) {
-      this.searchService().set('highlightTerm', searchData.term);
-      searchData.loading = true;
-      Ember.run.debounce(SearchHelper, SearchHelper.perform, this, 400);
-    } else {
-      searchData.results = [];
-    }
+    this.searchService().set('highlightTerm', searchData.term);
+    searchData.loading = true;
+    Ember.run.debounce(SearchHelper, SearchHelper.perform, this, 400);
   },
 
   moreOfType(type) {

config/locales/client.en.yml

@@ -1185,7 +1185,7 @@ en:
       most_liked: "Most Liked"
       select_all: "Select All"
       clear_all: "Clear All"
-      too_short: "Sorry, your search term is too short. Please try a longer query."
+      too_short: "Your search term is too short."
       result_count:
         one: "1 result for <span class='term'>\"{{term}}\"</span>"
         other: "{{count}} results for <span class='term'>\"{{term}}\"</span>"