refactore observeLiveSearchField and drop observe_field

app/views/additionals/_h2_with_query_search.html.slim

@@ -1,4 +1,3 @@
-= render partial: 'additionals/live_search_ajax_call.js', layout: false, formats: [:js]
 - classes = 'title' unless defined? classes
 h2 class="#{classes}"
   = @query.new_record? ? l(title) : h(@query.name)
@@ -8,3 +7,7 @@ h2 class="#{classes}"
                      autocomplete: 'off',
                      class: 'live-search-field',
                      placeholder: l(:label_query_name_search)
+
+    javascript:
+      observeLiveSearchField('search',
+                             'query-result-list')

app/views/additionals/_live_search_ajax_call.js.slim

@@ -1,18 +0,0 @@
-javascript:
-  $(function() {
-    // when the #search field changes
-    $('#search').live_observe_field(2, function() {
-      var form = $('#query_form'); // grab the form wrapping the search bar.
-      var url = form.attr('action');
-      form.find('[name="c[]"] option').each(function(i, elem) {
-        $(elem).attr('selected', true)
-      })
-      var formData = form.serialize();
-      form.find('[name="c[]"] option').each(function(i, elem) {
-        $(elem).attr('selected', false)
-      })
-      $.get(url, formData, function(data) { // perform an AJAX get, the trailing function is what happens on successful get.
-        $("#query-result-list").html(data); // replace the "results" div with the result of action taken
-      });
-    });
-  });

assets/javascripts/additionals.js

@@ -32,3 +32,59 @@ function formatFontawesomeText(icon) {
     return icon.text;
   }
 }
+
+/* exported observeLiveSearchField */
+function observeLiveSearchField(fieldId, targetId, target_url) {
+  $('#'+fieldId).each(function() {
+    var $this = $(this);
+    $this.addClass('autocomplete');
+    $this.attr('data-search-was', $this.val());
+    var check = function() {
+      var val = $this.val();
+      if ($this.attr('data-search-was') != val){
+        $this.attr('data-search-was', val);
+
+        var form = $('#query_form'); // grab the form wrapping the search bar.
+        var formData;
+        var url;
+        if (typeof target_url === 'undefined') {
+          url = form.attr('action');
+          formData = form.serialize();
+        } else {
+          url = target_url;
+          formData = { q: val };
+        }
+
+        form.find('[name="c[]"] option').each(function(i, elem) {
+          $(elem).attr('selected', true);
+        });
+        form.find('[name="c[]"] option').each(function(i, elem) {
+          $(elem).attr('selected', false);
+        });
+
+        $.ajax({
+          url: url,
+          type: 'get',
+          data: formData,
+          success: function(data){ if(targetId) $('#'+targetId).html(data); },
+          beforeSend: function(){ $this.addClass('ajax-loading'); },
+          complete: function(){ $this.removeClass('ajax-loading'); }
+        });
+      }
+    };
+
+    /* see https://stackoverflow.com/questions/1909441/how-to-delay-the-keyup-handler-until-the-user-stops-typing */
+    var search_delay = function(callback) {
+      var timer = 0;
+      return function() {
+        var context = this, args = arguments;
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+          callback.apply(context, args);
+        }, 400 || 0);
+      };
+    };
+
+    $this.keyup(search_delay(check));
+  });
+}

assets/javascripts/additionals_observe_field.js

@@ -1,52 +0,0 @@
-// see https://github.com/splendeo/jquery.observe_field
-
-(function($) {
-  'use strict';
-
-  $.fn.live_observe_field = function(frequency, callback) {
-
-    frequency = frequency * 100; // translate to milliseconds
-
-    return this.each(function() {
-      var $this = $(this);
-      var prev = $this.val();
-      var prevChecked = $this.prop('checked');
-
-      var check = function() {
-        if (removed()) {
-          // if removed clear the interval and don't fire the callback
-          if (ti)
-            clearInterval(ti);
-          return;
-        }
-
-        var val = $this.val();
-        var checked = $this.prop('checked');
-        if (prev != val || checked != prevChecked) {
-          prev = val;
-          prevChecked = checked;
-          $this.map(callback); // invokes the callback on $this
-        }
-      };
-
-      var removed = function() {
-        return $this.closest('html').length == 0;
-      };
-
-      var reset = function() {
-        if (ti) {
-          clearInterval(ti);
-          ti = setInterval(check, frequency);
-        }
-      };
-
-      check();
-      var ti = setInterval(check, frequency); // invoke check periodically
-
-      // reset counter after user interaction
-      $this.bind('keyup click mousemove', reset); // mousemove is for selects
-    });
-
-  };
-
-})(jQuery);

lib/additionals/helpers.rb

@@ -256,10 +256,6 @@ module Additionals
       additionals_include_js 'clipboard.min'
     end
 
-    def additionals_load_observe_field
-      additionals_include_js 'additionals_observe_field'
-    end
-
     def additionals_load_font_awesome
       additionals_include_css 'fontawesome-all.min'
     end