Autosuggest added!

Author: arjaneising

README.md

@@ -34,6 +34,7 @@ Arguments in queries
 [DATE:Some_date]
 [DATE:Month;type=month] for a month (will be padded like this if the input is `2012-05-13`): `2012-05-01`
 [DATE:Some_year;type=year,compact=true] for a year that will not be padded on the right.
+[STRING:SubjectName;autosuggest=subjects.name] for an autosuggest served from table 'subject' column 'name'.
 ```
 
 * Note that for comparison with the `=` you need to wrap the column name in the `DATE(columnname)` or one of the other date functions in MySQL. <http://dev.mysql.com/doc/refman/5.5/en/date-and-time-functions.html>

application.rb

@@ -66,6 +66,18 @@ class Application < Sinatra::Base
     end
 
 
+    post '/autosuggestable' do
+        results = QueryRow.autosuggest(params[:db], params[:table], params[:column], params[:query])
+
+        toReturn = {
+            :results => results,
+            :version => params[:version]
+        }
+
+        toReturn.to_json
+    end
+
+
     ['/:db/:query', '/:db/:query/:order', '/:db/:query/:order/desc', '/'].each do |path|
         get path do
             @queries = QueryTable.all

models/queryrow.rb

@@ -88,6 +88,7 @@ def results(params, limit = 100)
                 queryToExecute = query['query']
             else
                 queryArgs.each do |arg|
+                    p params['arg-' + arg[2]]
                     if params['arg-' + arg[2]].nil?
                         default = QueryRow.getArgParam(arg[3], 'default')
 
@@ -101,7 +102,7 @@ def results(params, limit = 100)
 
                 queryToExecute = query['query'].gsub(pattern) { |match|
                     match = match.scan(pattern)
-                    params['arg-' + match[0][2]]
+                    CGI::unescape(params['arg-' + match[0][2]])
                 }
             end
 
@@ -155,4 +156,27 @@ def self.getArgParam(haystack, needle)
         result = result[2] unless result.nil?
         result
     end
+
+
+    def self.autosuggest(db, table, column, query)
+        seconddb = Sequel.connect(
+            :adapter => 'mysql2',
+            :host => Config['db']['host'],
+            :user => Config['db']['user'],
+            :password => Config['db']['pass'],
+            :database => db,
+            :timeout => 30,
+            :reconnect => true
+        )
+
+        toReturn = []
+
+        results = seconddb[table.to_sym].filter(column.to_sym.like('%' + query + '%')).limit(14)
+
+        results.each do |results|
+            toReturn.push(results[column.to_sym])
+        end
+
+        toReturn
+    end
 end

public/scripts/asq.js

@@ -47,6 +47,8 @@ var Asq = {
         Asq.current.db = $('meta[name="default-db"]').attr('content');
 
         Asq.recover();
+
+        Asq.log('Page rendered.');
     },
 
 
@@ -563,6 +565,8 @@ var Asq = {
             info;
 
         $.each(Asq.requestedArgs, function(index, arg) {
+            var extraAttrs = '';
+
             if (arg[1] == 'DATE') {
                 inputClass = 'date-pick';
 
@@ -575,6 +579,11 @@ var Asq = {
                     info = 'date';
                 }
             }
+            else if (arg[1] == 'STRING' && Asq.getArgParam(arg[3], 'autosuggest')) {
+                inputClass = 'autosuggest';
+                extraAttrs = ' data-autosuggest="' + Asq.getArgParam(arg[3], 'autosuggest') + '"';
+                info = 'string';
+            }
             else {
                 inputClass = false;
                 info = arg[1].toLowerCase();
@@ -587,7 +596,7 @@ var Asq = {
                             arg[2] +
                             ' <small>(' + info + ')</small>' +
                         '</label>' +
-                        '<input id="arg-' + arg[2] + '"' + (inputClass ? ' class="' + inputClass + '"' : '') + ' value="' + value + '">' +
+                        '<input id="arg-' + arg[2] + '"' + (inputClass ? ' class="' + inputClass + '"' : '') + ' value="' + value + '"' + extraAttrs + '>' +
                     '</li>';
         });
 
@@ -601,6 +610,24 @@ var Asq = {
             startDate: '1996-01-01'
         });
 
+        argsElm.find('.autosuggest').each(function(index, elm) {
+            elm = $(elm);
+
+            var tableColumn = elm.attr('data-autosuggest').split('.');
+                data = {
+                    db: Asq.current.db,
+                    table: tableColumn[0],
+                    column: tableColumn[1]
+                };
+
+            elm.autosuggest({
+                data: data,
+                clickLinkCallback: function(aElm) {
+                    elm.val($(aElm).attr('data-suggestion'));
+                }
+            });
+        });
+
         $.each(location.search.split(/\?|&/), function(index, elm) {
             if (elm.indexOf('arg-') == 0) {
                 var keyval = elm.split('=');
@@ -945,6 +972,10 @@ var Asq = {
 
 
     formatData: function(data) {
+        if (/[0-9a-z]{40}/i.test(data)) {
+            return data;
+        }
+
         var parsedNumber = parseFloat(data, 10),
             x, x1, x2;
 

public/scripts/jquery.autosuggest.js

@@ -0,0 +1,228 @@
+/**
+ * Curstomized autosuggest jQuery Plugin
+ */
+(function($) {
+    var dropdownElm = null;
+
+    $.fn.autosuggest = function(options) {
+        var defaults = {},
+            elms = this,
+            elm = null,
+            highestIndex = 0,
+            width = 0,
+            mostRecent = 0;
+
+
+        $.extend(defaults, options);
+
+
+        elms.keyup(typeCheck);
+        elms.attr('autocomplete', 'off');
+        elms.mouseup(function(e){e.preventDefault()}); // for webkit
+        elms.focus(function(e){this.select()});
+
+
+        /* Called on keyup in search box; updown/moves focus in dropdown; ESC closes dropdown; others call API */
+        function typeCheck(e) {
+            elm = $(this);
+
+            switch (e.which) {
+                case 27:
+                    if (dropdownElm)
+                        dropdownElm.addClass('hide');
+                    break;
+                case 38:
+                    e.preventDefault();
+                    selectLink('last');
+                    break;
+                case 40:
+                    e.preventDefault();
+                    selectLink('first');
+                    break;
+                default:
+                    positionDrowndown($(this));
+                    break;
+            }
+        }
+
+
+        /* Gets the position of box and places dropdown underneath it. Also does Ajax call to API. */
+        function positionDrowndown(elm) {
+            if (!dropdownElm) {
+                dropdownElm = $('<div class="suggest-dropdown hide">' +
+                    '<div>' +
+                    '</div>' +
+                '</div>');
+                $('body').append(dropdownElm);
+            }
+            else {
+                dropdownElm.addClass('hide');
+            }
+
+            var terms = elm.val();
+
+
+            if (terms.length === 0) {
+                dropdownElm.addClass('hide');
+                return;
+            }
+
+            var dataToSend = {};
+
+            ++mostRecent;
+
+            $.extend(dataToSend, defaults.data, {
+                query: elm.val(),
+                version: mostRecent
+            });
+
+            $('body').addClass('loading');
+
+            $.ajax({
+                url: '/autosuggestable',
+                dataType: 'json',
+                data: dataToSend,
+                type: 'POST',
+                success: ajaxCallback,
+                error: function() {
+                    dropdownElm.addClass('hide');
+                    $('body').removeClass('loading');
+                }
+            });
+
+            /* Calculate and set positions */
+            var offset = elm.offset(),
+                top = offset.top + elm.outerHeight(),
+                left = offset.left;
+
+            width = elm.outerWidth();
+
+            dropdownElm.css({
+                left: left + 'px',
+                top: top + 'px',
+                width: width + 'px'
+            });
+
+            /* Handle up down keystrokes */
+            dropdownElm.undelegate('a', 'keyup keydown');
+            dropdownElm.delegate('a', 'keyup', navigateLink);
+            dropdownElm.delegate('a', 'keydown', function(e){
+                if (e.which !== 38 && e.which !== 40) return;
+                e.preventDefault();
+            });
+
+            dropdownElm.undelegate('a', 'click');
+
+            /* Fire callback, if needed. */
+            if (defaults.clickLinkCallback) {
+                dropdownElm.delegate('a', 'click', function(e) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    dropdownElm.addClass('hide');
+                    defaults.clickLinkCallback(this);
+                    elm[0].focus();
+                });
+            }
+        }
+
+
+        /* Handles Ajax JSONP results, puts them in dropdown element */
+        function ajaxCallback(data) {
+            if (mostRecent != data.version) return;
+
+            $('body').removeClass('loading');
+
+            dropdownElm.removeClass('hide');
+
+            var html = '<ul>';
+
+            $.each(data.results, function(index, suggestion) {
+                html += '<li><a href="#" data-suggestion="' + suggestion + '">' + suggestion + '</a></li>';
+            });
+
+            html += '</ul>';
+
+            dropdownElm.find('div').html(html);
+
+            dropdownElm.find('a').each(function(index, aElm) {
+                aElm = $(aElm);
+                aElm.attr('data-index', index);
+                highestIndex = index;
+            });
+
+            elm[0].focus();
+        }
+
+
+        /* Called when using UP/DOWN keys on links */
+        function navigateLink(e) {
+            var aElm = $(this),
+                upDown = e.which,
+                currentIndex = parseInt(aElm.attr('data-index'), 10),
+                toShow = null;
+
+            switch (upDown) {
+                case 38:
+                    toShow = currentIndex - 1;
+                    if (toShow < 0) {
+                        elm[0].focus();
+                        return;
+                    }
+                    break;
+                case 40:
+                    toShow = currentIndex + 1;
+                    if (toShow > highestIndex) {
+                        elm[0].focus();
+                        return;
+                    }
+                    break;
+                case 27:
+                    dropdownElm.addClass('hide');
+                    elm[0].focus();
+                    return;
+                default:
+                    return;
+            }
+
+            e.preventDefault();
+
+            selectLink(toShow);
+        }
+
+
+        /* Gives specieif link focus */
+        function selectLink(index) {
+            var tabbedElm;
+            switch(index) {
+                case 'first':
+                    tabbedElm = dropdownElm.find('a:first');
+                    break;
+                case 'last':
+                    tabbedElm = dropdownElm.find('a:last');
+                    break;
+                default:
+                    tabbedElm = dropdownElm.find('a:eq(' + index + ')')
+            }
+
+            tabbedElm[0].focus();
+        }
+
+
+        /* Closes dropdown when clicking outside dropdown or searchbar */
+        function documentClick(e) {
+            var tgt = $(e.target),
+                found = tgt.closest('.suggest-dropdown'),
+                same = tgt.is(elm);
+
+            if (found.length === 1 || !dropdownElm || same) return;
+
+            dropdownElm.addClass('hide');
+        }
+
+
+        $('body').click(documentClick);
+
+
+        return elm;
+    }
+})(jQuery);

templates/layout.haml

@@ -18,4 +18,5 @@
     %script{ :src => '/scripts/codemirror/mode/mysql/mysql.js'}
     %script{ :src => '/scripts/datepicker/date.js'}
     %script{ :src => '/scripts/datepicker/jquery.datepicker.js'}
+    %script{ :src => '/scripts/jquery.autosuggest.js'}
     %script{ :src => '/scripts/asq.js'}