Added feedback message when query returns no results.

This commit is contained in:
William Boman 2014-10-21 01:28:17 +02:00
parent d87208f277
commit 276b5a1bf0
3 changed files with 20 additions and 0 deletions

View File

@ -20,5 +20,9 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<div id="no-search-results">
<div class="alert alert-danger" role="alert"><i class="fa fa-ban"></i> No icons with the tag <strong>'<span></span>'</strong> were found.</div>
<div class="alert alert-info" role="alert"><i class="fa fa-exclamation-circle"></i> Tags are added by the community. Do you think your search query should return an icon? Send a pull request on <a href="https://github.com/FortAwesome/Font-Awesome">GitHub</a>!</div>
</div>
</{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}> </{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>

View File

@ -10,6 +10,7 @@ $(function() {
var $filter = $('#filter'); var $filter = $('#filter');
var $other = $('#new, #web-application, #form-control, #medical, #currency, #text-editor, #directional, #video-player, #brand, #file-type, #spinner, #payment, #chart'); var $other = $('#new, #web-application, #form-control, #medical, #currency, #text-editor, #directional, #video-player, #brand, #file-type, #spinner, #payment, #chart');
var $clear = $('#filter-clear'); var $clear = $('#filter-clear');
var $no_results = $('#no-search-results');
var $icons = $('.filter-icon', $filter); var $icons = $('.filter-icon', $filter);
@ -29,10 +30,21 @@ $(function() {
if(!val) return; if(!val) return;
var resultsCount = 0;
$icons.each(function() { $icons.each(function() {
var show = $(this).attr('data-filter').match(' '+val); var show = $(this).attr('data-filter').match(' '+val);
if( show ) resultsCount++;
$(this).toggle(!!show); $(this).toggle(!!show);
}); });
console.log(resultsCount);
if( resultsCount == 0 && val.length != 0 ) {
$no_results.find('span').text(val);
$no_results.show();
} else {
$no_results.hide();
}
}).trigger('keyup'); }).trigger('keyup');
} }

View File

@ -84,3 +84,7 @@
.text-strike { text-decoration: line-through; } .text-strike { text-decoration: line-through; }
.text-upper { text-transform: uppercase; } .text-upper { text-transform: uppercase; }
.text-lower { text-transform: lowercase; } .text-lower { text-transform: lowercase; }
#no-search-results {
display: none;
}