Ad the new autocomplete search. re #34

styles/style-base.css

@@ -321,12 +321,16 @@ width:100%;
 
 
 /*-------------Search Aside-------------*/
-#tool input[type=text]
+#tool input[type=text], .twitter-typeahead
 {
 vertical-align: middle;
 width: 100%;
 }
 
+.tt-hint, .tt-query {
+    width: 100%;
+    }
+
 .stop select
 {
 vertical-align: middle;
@@ -350,6 +354,35 @@ vertical-align: middle;
 width: 100%;
 }
 
+.tt-dropdown-menu {
+  width: 322px;
+  text-align: left;
+  margin-top: 6px;
+  color: #000066;   
+  padding: 4px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+}
+
+.tt-header {
+    border-bottom: 1px solid #CCCCCC;
+    font-weight: bold;
+}
+
+.tt-suggestion {
+  padding: 3px 20px;
+  line-height: 14px;
+}
+
+.tt-suggestion.tt-is-under-cursor {
+  color: #1c1c1c;
+  background-color: #778899;
+}
+
+.tt-suggestion p {
+  margin: 0;
+}
+
 /* =============================================================================
    Mediaquerie stuff goes here
    ========================================================================== */

styles/style-eink.css

@@ -44,4 +44,15 @@ header {
 .download a {
     background: black;  
     color: white;
+}
+
+
+.tt-dropdown-menu {
+  color: black;   
+  background-color: white;
+  border: 1px solid #ccc;
+}
+.tt-suggestion.tt-is-under-cursor {
+  color: black;
+  background-color: white;
 }

util.js

@@ -256,6 +256,33 @@ function updatePage (data) {
     } else {
         $("#sortForm").hide ();
     }
+    
+    //$('input[name=query]').typeahead('destroy');
+    $('input[name=query]').typeahead([
+    {
+        name: 'search',
+        allowDuplicates: true,
+        minLength : 3,
+        valueKey: 'title',
+        limit: 24,
+        template: templateSuggestion,
+        remote: {
+            url: 'getJSON.php?search=1&db=%DB&query=%QUERY',
+            replace: function (url, query) {
+                return url.replace('%QUERY', query).replace('%DB', currentData.databaseId);
+            }
+        }
+    }
+    ]);
+    
+    $('input[name=query]').bind('typeahead:selected', function(obj, datum) {        
+        //alert(JSON.stringify(obj)); // object
+        // outputs, e.g., {"type":"typeahead:selected","timeStamp":1371822938628,"jQuery19105037956037711017":true,"isTrigger":true,"namespace":"","namespace_re":null,"target":{"jQuery19105037956037711017":46},"delegateTarget":{"jQuery19105037956037711017":46},"currentTarget":
+        //alert(JSON.stringify(datum)); // contains datum value, tokens and custom fields
+        // outputs, e.g., {"redirect_url":"http://localhost/test/topic/test_topic","image_url":"http://localhost/test/upload/images/t_FWnYhhqd.jpg","description":"A test description","value":"A test value","tokens":["A","test","value"]}
+        // in this case I created custom fields called 'redirect_url', 'image_url', 'description'       
+        navigateTo (datum.navlink);
+    });
 }
 
 function navigateTo (url) {