diff --git a/src/_includes/icons/filter.html b/src/_includes/icons/filter.html
index c639c1d8f..689f063ea 100644
--- a/src/_includes/icons/filter.html
+++ b/src/_includes/icons/filter.html
@@ -20,5 +20,9 @@
{% endfor %}
+
+
No icons with the tag '' were found.
+
Tags are added by the community. Do you think your search query should return an icon? Send a pull request on
GitHub!
+
{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>
diff --git a/src/assets/js/site.js b/src/assets/js/site.js
index de23d25ae..4e0a9be38 100644
--- a/src/assets/js/site.js
+++ b/src/assets/js/site.js
@@ -10,6 +10,7 @@ $(function() {
var $filter = $('#filter');
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 $no_results = $('#no-search-results');
var $icons = $('.filter-icon', $filter);
@@ -29,10 +30,21 @@ $(function() {
if(!val) return;
+ var resultsCount = 0;
$icons.each(function() {
var show = $(this).attr('data-filter').match(' '+val);
+ if( show ) resultsCount++;
$(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');
}
diff --git a/src/assets/less/site/lazy.less b/src/assets/less/site/lazy.less
index fb5a9745a..02d7ba306 100644
--- a/src/assets/less/site/lazy.less
+++ b/src/assets/less/site/lazy.less
@@ -84,3 +84,7 @@
.text-strike { text-decoration: line-through; }
.text-upper { text-transform: uppercase; }
.text-lower { text-transform: lowercase; }
+
+#no-search-results {
+ display: none;
+}