Show a "Not Found" message when nothing is found (Closes #84)

Raku · Aug 22, 2015 · d7719ae · d7719ae
1 parent c150897
commit d7719ae
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/html/css/style.css b/html/css/style.css
@@ -125,7 +125,19 @@ td p {
     vertical-align: middle;
 }
 
+#search.not-found > div:before {
+    content: "Sorry, no results were found";
+    background: red;
+    color: white;
+    padding: 2px 15px;
+    border-radius: 3px;
+    position: absolute;
+    bottom: -4ex;
+    left: 0;
+}
+
 #search {
+    position: relative;
     float: right;
     margin-right: 1.5em;
     margin-bottom: 0.5em;

diff --git a/template/search_template.js b/template/search_template.js
@@ -1,6 +1,10 @@
 $(function(){
   $('#search').css('visibility', 'visible');
   $("#query").autocomplete({
+      response: function( e, ui ) {
+        if ( ! ui.content.length ) { $('#search').addClass(   'not-found') }
+        else {                       $('#search').removeClass('not-found') }
+      },
       position: { my: "right top", at: "right bottom", of: "#search div" },
       source: [
 ITEMS