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

Author: zoffixznet

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;

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