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

This commit is contained in:
Robin Ward 2016-08-09 16:05:58 -04:00
parent cc366d5a60
commit db3ae803c5
3 changed files with 15 additions and 10 deletions

View file

@ -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'));
}

View file

@ -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) {

View file

@ -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>"