Ticket #960: remote_autocomplete_v2.diff

actionpack/lib/action_view/helpers/javascripts/prototype.js

@@ -452 +452 @@
-    element.style.backgroundColor = "#ffff" + current.toColorPart();
-  }
-}
+
+/*--------------------------------------------------------------------------*/
+
+Event = {
+  KEY_BACKSPACE: 8,
+  KEY_TAB:       9,
+  KEY_RETURN:   13,
+  KEY_ESC:      27,
+  KEY_LEFT:     37,
+  KEY_UP:       38,
+  KEY_RIGHT:    39,
+  KEY_DOWN:     40,
+  KEY_DELETE:   46,
+
+  element: function(event) {
+    return event.srcElement || event.currentTarget;
+  },
+  
+  stop: function(event) {
+    if(event.preventDefault) 
+      { event.preventDefault(); event.stopPropagation(); }
+    else 
+      event.returnValue = false;
+  },
+  
+  getParentNodeOrSelfByName: function(event, nodeName) {
+    element = Event.element(event);
+      while(element.nodeName != nodeName && element.parentNode) 
+        element = element.parentNode; 
+    return element;
+  },
+  
+  observeKeypress: function(element, observer) {
+    if(navigator.appVersion.indexOf('AppleWebKit')>0) 
+      { $(element).addEventListener("keydown",observer,false); return; }
+    if($(element).addEventListener) $(element).addEventListener("keypress",observer,false)
+      else if($(element).attachEvent) $(element).attachEvent("onkeydown",observer);
+  },
+  
+  observeBlur: function(element, observer) {
+    if($(element).addEventListener) $(element).addEventListener("blur",observer,false)
+      else if($(element).attachEvent) $(element).attachEvent("onblur",observer);
+  },
+  
+  observeClick: function(element, observer) {
+    if($(element).addEventListener) $(element).addEventListener("click",observer,false)
+      else if($(element).attachEvent) $(element).attachEvent("onclick",observer);
+  },
+  
+  observeHover: function(element, observer) {
+    if($(element).addEventListener) $(element).addEventListener("mouseover",observer,false)
+      else if($(element).attachEvent) $(element).attachEvent("onmouseover",observer);
+  }
+  
+}
+
+Text = {
+  stripTags: function(htmlstr) {
+    return htmlstr.replace(/<\/?[^>]+>/gi,"");
+  },
+  decodeHTML: function(htmlstr) {
+    return htmlstr.replace("&lt;","<").replace("&gt;",">").replace("&quot;",'"').replace("&amp;","&");
+  }
+}
+
+Element = {
+  show: function(element) {
+    $(element).style.display = '';
+  },
+  hide: function(element) {
+    $(element).style.display = 'none';
+  },
+  samePositionAs: function(element, aselement) {
+    if(navigator.appVersion.indexOf('MSIE')>0) {
+      $(element).style.top      = $(aselement).style.top;
+      $(element).style.left     = $(aselement).style.left;
+      $(element).style.width    = $(aselement).offsetWidth;
+      $(element).style.height   = $(aselement).offsetHeight;
+    }
+  }
+}
+                     
+Ajax.Autocomplete = Class.create();
+Ajax.Autocomplete.prototype = (new Ajax.Base()).extend({
+  initialize: function(element, update, url, options) {
+    this.element     = $(element); 
+    this.update      = $(update);  
+    this.has_focus   = false; 
+    this.changed     = false; 
+    this.active      = false; 
+    this.index       = 0;     
+    this.entry_count = 0;    
+    this.url         = url;
+
+    this.setOptions(options);
+    this.options.asynchronous = true;
+    this.options.onComplete   = this.onComplete.bind(this)
+    this.options.frequency    = this.options.frequency || 0.4;
+    this.options.min_chars    = this.options.min_chars || 1;
+    this.options.method       = 'post';
+    
+    if(this.options.indicator)
+      this.indicator = $(this.options.indicator);
+       
+    this.observer = null;
+    
+    Event.observeKeypress (this.element, this.onKeyPress.bindAsEventListener(this));
+    Event.observeClick    (document, this.onBlur.bindAsEventListener(this));
+  },
+  
+  show: function() {
+    Element.show(this.update);
+    if(!this.iefix && (navigator.appVersion.indexOf('MSIE')>0)) {
+      new Insertion.Before(this.update, 
+       '<iframe id="' + this.update.id + '_iefix" style="display:none;" src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
+      this.iefix = $(this.update.id+'_iefix');
+      this.iefix.style.position = 'absolute';
+      this.iefix.style.zIndex = 1;
+      this.update.style.zIndex = 2;
+    }
+    if(this.iefix) {
+      Element.samePositionAs(this.iefix, this.update);
+      Element.show(this.iefix);
+    }
+  },
+  
+  hide: function() {
+    if(this.iefix) Element.hide(this.iefix);
+    Element.hide(this.update);
+  },
+  
+  startIndicator: function() {
+    if(this.indicator) Element.show(this.indicator);
+  },
+  
+  stopIndicator: function() {
+    if(this.indicator) Element.hide(this.indicator);
+  },
+  
+  onObserverEvent: function() {
+    this.changed = false;   
+    if(this.element.value.length>=this.options.min_chars) {
+      this.startIndicator();
+      this.options.parameters = this.options.callback ?
+        this.options.callback(this.element, Form.Element.getValue(this.element)) :
+          Form.Element.getValue(this.element);
+      new Ajax.Request(this.url, this.options);
+    } else {
+      this.active = false;
+      this.hide();
+    }
+  },
+  
+  onComplete: function(request) {
+    if(!this.changed) {
+      this.update.innerHTML = request.responseText;
+
+      if(this.update.firstChild && this.update.firstChild.childNodes) {
+        this.entry_count = 
+          this.update.firstChild.childNodes.length;
+        for (var i = 0; i < this.entry_count; i++) {
+          entry = this.get_entry(i);
+          entry.autocompleteIndex = i;
+          Event.observeHover(entry, this.onHover.bindAsEventListener(this));
+          Event.observeClick(entry, this.onClick.bindAsEventListener(this));
+        }
+      } else { 
+        this.entry_count = 0;
+      }
+      
+      this.stopIndicator();
+      
+      this.index = 0;
+      this.render();
+    }
+  },
+  
+  onKeyPress: function(event) {
+    if(this.active)
+      switch(event.keyCode) {
+       case Event.KEY_TAB:
+       case Event.KEY_RETURN:
+         this.select_entry();
+         Event.stop(event);
+       case Event.KEY_ESC:
+         this.hide();
+         this.active = false;
+         return;
+       case Event.KEY_LEFT:
+       case Event.KEY_RIGHT:
+         return;
+       case Event.KEY_UP:
+         this.mark_previous();
+         this.render();
+         return;
+       case Event.KEY_DOWN:
+         this.mark_next();
+         this.render();
+         return;
+      }
+     else 
+      if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN) 
+        return;
+    
+    this.changed = true;
+    this.has_focus = true;
+    
+    if(this.observer) clearTimeout(this.observer);
+      this.observer = 
+        setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
+  },
+  
+  onHover: function(event) {
+    element = Event.getParentNodeOrSelfByName(event, 'LI');
+    if(this.index != element.autocompleteIndex) 
+    {
+        this.index = element.autocompleteIndex;
+        this.render();
+    }
+  },
+  
+  onClick: function(event) {
+    element = Event.getParentNodeOrSelfByName(event, 'LI');
+    this.index = element.autocompleteIndex;
+    this.select_entry();
+  },
+  
+  onBlur: function(event) {
+    element = Event.element(event);
+    if(element==this.update) return;
+    while(element.parentNode) 
+      { element = element.parentNode; if(element==this.update) return; }
+    this.hide();
+    this.active = false;
+  }, 
+  
+  render: function() {
+    if(this.entry_count > 0) {
+      for (var i = 0; i < this.entry_count; i++)
+        this.get_entry(i).className =
+          this.index==i ? 'selected' : '';
+        
+      if(this.has_focus) { 
+        if(this.get_current_entry().scrollIntoView) 
+          this.get_current_entry().scrollIntoView(false);
+        
+        this.show();
+        this.active = true;
+      }
+    } else this.hide();
+  },
+  
+  mark_previous: function() {
+    if(this.index > 0) this.index--
+      else this.index = this.entry_count-1;
+  },
+  
+  mark_next: function() {
+    if(this.index < this.entry_count-1) this.index++
+      else this.index = 0;
+  },
+  
+  get_entry: function(index) {
+    return this.update.firstChild.childNodes[index];
+  },
+  
+  get_current_entry: function() {
+    return this.get_entry(this.index);
+  },
+  
+  select_entry: function() {
+    this.hide();
+    this.active = false;
+    value = Text.decodeHTML(Text.stripTags(this.get_current_entry().innerHTML));
+    this.element.value = value;
+    this.element.focus();
+  }
+});

actionpack/lib/action_view/helpers/form_helper.rb

@@ -1 +1 @@
-require 'cgi'
-require File.dirname(__FILE__) + '/date_helper'
-require File.dirname(__FILE__) + '/tag_helper'
+require File.dirname(__FILE__) + '/javascript_helper'
+require File.dirname(__FILE__) + '/url_helper'
-
-module ActionView
-  module Helpers
@@ -141 +143 @@
-
-    class InstanceTag #:nodoc:
-      include Helpers::TagHelper
+      include Helpers::JavascriptHelper
+      include Helpers::UrlHelper
-
-      attr_reader :method_name, :object_name
-
@@ -151 +155 @@
-      def initialize(object_name, method_name, template_object, local_binding = nil)
-        @object_name, @method_name = object_name, method_name
-        @template_object, @local_binding = template_object, local_binding
+        @controller = @template_object.controller # url_for in :remote_autocomplete
-        if @object_name.sub!(/\[\]$/,"")
-          @auto_index = @template_object.instance_variable_get("@#{Regexp.last_match.pre_match}").id_before_type_cast
-        end
@@ -166 +171 @@
-        options["type"] = field_type
-        options["value"] ||= value_before_type_cast unless field_type == "file"
-        add_default_name_and_id(options)
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-      end
-
-      def to_radio_button_tag(tag_value, options = {})

actionpack/lib/action_view/helpers/javascript_helper.rb

@@ -147 +147 @@
-      def observe_form(form_id, options = {})
-        build_observer('Form.Observer', form_id, options)
-      end
+      
+      # Adds Ajax autocomplete functionality to the text input field with the 
+      # DOM ID specified by +field_id+.
+      #
+      # This function expects that the called action returns a HTML <ul> list,
+      # or nothing if no entries should be displayed for autocompletion.
+      # Note: There must be no whitespace between the returned elements. 
+      # 
+      # Required +options+ are:
+      # <tt>:url</tt>::       Specifies the DOM ID of the element whose
+      #                       innerHTML should be updated with the autocomplete
+      #                       entries returned by XMLHttpRequest.
+      # 
+      # Addtional +options+ are:
+      # <tt>:update</tt>::    Specifies the DOM ID of the element whose 
+      #                       innerHTML should be updated with the autocomplete
+      #                       entries returned by the Ajax request. 
+      #                       Defaults to field_id + '_autocomplete'
+      # <tt>:with</tt>::      A Javascript expression specifying the
+      #                       parameters for the XMLHttpRequest. This defaults
+      #                       to 'value', which in the evaluated context 
+      #                       refers to the new field value.
+      # <tt>:indicator</tt>:: Specifies the DOM ID of an elment which will be
+      #                       displayed while autocomplete is running. 
+      #
+      def autocomplete_for(field_id, options = {})
+        function =  "new Ajax.Autocomplete("
+        function << "'#{field_id}', "
+        function << "'" + (options[:update] || "#{field_id}_autocomplete") + "', "
+        function << "'#{url_for(options[:url])}'"
+        js_options = {}
+        js_options[:callback] = "function(element, value) {return #{options[:with]}}" if options[:with]
+        js_options[:indicator] = "'#{options[:indicator]}'" if options[:indicator]
+        function << (', {' + js_options.map {|k, v| "#{k}:#{v}"}.join(', ') + '}')
+        function << ")"
+              
+        "<script type=\"text/javascript\">#{function}</script>"        
+      end
+      
+      # Use this method in your view to generate a return for the Ajax automplete requests.
+      #
+      # Example Action:
+      #   @items = Item.find_all([ 'LOWER(description) LIKE ?', 
+      #     '%' + @params["for"].downcase + '%' ], 'description ASC')
+      #   render_without_layout
+      #   
+      # Example View:
+      #   <%= autocomplete_responder @items, 'description' %>
+      #
+      def autocomplete_responder(entries, field, phrase = nil)
+        "<ul>#{entries.map { |entry| '<li>' + (phrase ? highlight(entry[field],phrase) : h(entry[field])) + '</li>' }.join}</ul>" if entries
+      end
-
-      # Escape carrier returns and single and double quotes for Javascript segments.
-      def escape_javascript(javascript)

railties/html/javascripts/prototype.js

@@ -452 +452 @@
-    element.style.backgroundColor = "#ffff" + current.toColorPart();
-  }
-}
+
+/*--------------------------------------------------------------------------*/
+
+Event = {
+  KEY_BACKSPACE: 8,
+  KEY_TAB:       9,
+  KEY_RETURN:   13,
+  KEY_ESC:      27,
+  KEY_LEFT:     37,
+  KEY_UP:       38,
+  KEY_RIGHT:    39,
+  KEY_DOWN:     40,
+  KEY_DELETE:   46,
+
+  element: function(event) {
+    return event.srcElement || event.currentTarget;
+  },
+  
+  stop: function(event) {
+    if(event.preventDefault) 
+      { event.preventDefault(); event.stopPropagation(); }
+    else 
+      event.returnValue = false;
+  },
+  
+  getParentNodeOrSelfByName: function(event, nodeName) {
+    element = Event.element(event);
+      while(element.nodeName != nodeName && element.parentNode) 
+        element = element.parentNode; 
+    return element;
+  },
+  
+  observeKeypress: function(element, observer) {
+    if(navigator.appVersion.indexOf('AppleWebKit')>0) 
+      { $(element).addEventListener("keydown",observer,false); return; }
+    if($(element).addEventListener) $(element).addEventListener("keypress",observer,false)
+      else if($(element).attachEvent) $(element).attachEvent("onkeydown",observer);
+  },
+  
+  observeBlur: function(element, observer) {
+    if($(element).addEventListener) $(element).addEventListener("blur",observer,false)
+      else if($(element).attachEvent) $(element).attachEvent("onblur",observer);
+  },
+  
+  observeClick: function(element, observer) {
+    if($(element).addEventListener) $(element).addEventListener("click",observer,false)
+      else if($(element).attachEvent) $(element).attachEvent("onclick",observer);
+  },
+  
+  observeHover: function(element, observer) {
+    if($(element).addEventListener) $(element).addEventListener("mouseover",observer,false)
+      else if($(element).attachEvent) $(element).attachEvent("onmouseover",observer);
+  }
+  
+}
+
+Text = {
+  stripTags: function(htmlstr) {
+    return htmlstr.replace(/<\/?[^>]+>/gi,"");
+  },
+  decodeHTML: function(htmlstr) {
+    return htmlstr.replace("&lt;","<").replace("&gt;",">").replace("&quot;",'"').replace("&amp;","&");
+  }
+}
+
+Element = {
+  show: function(element) {
+    $(element).style.display = '';
+  },
+  hide: function(element) {
+    $(element).style.display = 'none';
+  },
+  samePositionAs: function(element, aselement) {
+    if(navigator.appVersion.indexOf('MSIE')>0) {
+      $(element).style.top      = $(aselement).style.top;
+      $(element).style.left     = $(aselement).style.left;
+      $(element).style.width    = $(aselement).offsetWidth;
+      $(element).style.height   = $(aselement).offsetHeight;
+    }
+  }
+}
+                     
+Ajax.Autocomplete = Class.create();
+Ajax.Autocomplete.prototype = (new Ajax.Base()).extend({
+  initialize: function(element, update, url, options) {
+    this.element     = $(element); 
+    this.update      = $(update);  
+    this.has_focus   = false; 
+    this.changed     = false; 
+    this.active      = false; 
+    this.index       = 0;     
+    this.entry_count = 0;    
+    this.url         = url;
+
+    this.setOptions(options);
+    this.options.asynchronous = true;
+    this.options.onComplete   = this.onComplete.bind(this)
+    this.options.frequency    = this.options.frequency || 0.4;
+    this.options.min_chars    = this.options.min_chars || 1;
+    this.options.method       = 'post';
+    
+    if(this.options.indicator)
+      this.indicator = $(this.options.indicator);
+       
+    this.observer = null;
+    
+    Event.observeKeypress (this.element, this.onKeyPress.bindAsEventListener(this));
+    Event.observeClick    (document, this.onBlur.bindAsEventListener(this));
+  },
+  
+  show: function() {
+    Element.show(this.update);
+    if(!this.iefix && (navigator.appVersion.indexOf('MSIE')>0)) {
+      new Insertion.Before(this.update, 
+       '<iframe id="' + this.update.id + '_iefix" style="display:none;" src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
+      this.iefix = $(this.update.id+'_iefix');
+      this.iefix.style.position = 'absolute';
+      this.iefix.style.zIndex = 1;
+      this.update.style.zIndex = 2;
+    }
+    if(this.iefix) {
+      Element.samePositionAs(this.iefix, this.update);
+      Element.show(this.iefix);
+    }
+  },
+  
+  hide: function() {
+    if(this.iefix) Element.hide(this.iefix);
+    Element.hide(this.update);
+  },
+  
+  startIndicator: function() {
+    if(this.indicator) Element.show(this.indicator);
+  },
+  
+  stopIndicator: function() {
+    if(this.indicator) Element.hide(this.indicator);
+  },
+  
+  onObserverEvent: function() {
+    this.changed = false;   
+    if(this.element.value.length>=this.options.min_chars) {
+      this.startIndicator();
+      this.options.parameters = this.options.callback ?
+        this.options.callback(this.element, Form.Element.getValue(this.element)) :
+          Form.Element.getValue(this.element);
+      new Ajax.Request(this.url, this.options);
+    } else {
+      this.active = false;
+      this.hide();
+    }
+  },
+  
+  onComplete: function(request) {
+    if(!this.changed) {
+      this.update.innerHTML = request.responseText;
+
+      if(this.update.firstChild && this.update.firstChild.childNodes) {
+        this.entry_count = 
+          this.update.firstChild.childNodes.length;
+        for (var i = 0; i < this.entry_count; i++) {
+          entry = this.get_entry(i);
+          entry.autocompleteIndex = i;
+          Event.observeHover(entry, this.onHover.bindAsEventListener(this));
+          Event.observeClick(entry, this.onClick.bindAsEventListener(this));
+        }
+      } else { 
+        this.entry_count = 0;
+      }
+      
+      this.stopIndicator();
+      
+      this.index = 0;
+      this.render();
+    }
+  },
+  
+  onKeyPress: function(event) {
+    if(this.active)
+      switch(event.keyCode) {
+       case Event.KEY_TAB:
+       case Event.KEY_RETURN:
+         this.select_entry();
+         Event.stop(event);
+       case Event.KEY_ESC:
+         this.hide();
+         this.active = false;
+         return;
+       case Event.KEY_LEFT:
+       case Event.KEY_RIGHT:
+         return;
+       case Event.KEY_UP:
+         this.mark_previous();
+         this.render();
+         return;
+       case Event.KEY_DOWN:
+         this.mark_next();
+         this.render();
+         return;
+      }
+     else 
+      if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN) 
+        return;
+    
+    this.changed = true;
+    this.has_focus = true;
+    
+    if(this.observer) clearTimeout(this.observer);
+      this.observer = 
+        setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
+  },
+  
+  onHover: function(event) {
+    element = Event.getParentNodeOrSelfByName(event, 'LI');
+    if(this.index != element.autocompleteIndex) 
+    {
+        this.index = element.autocompleteIndex;
+        this.render();
+    }
+  },
+  
+  onClick: function(event) {
+    element = Event.getParentNodeOrSelfByName(event, 'LI');
+    this.index = element.autocompleteIndex;
+    this.select_entry();
+  },
+  
+  onBlur: function(event) {
+    element = Event.element(event);
+    if(element==this.update) return;
+    while(element.parentNode) 
+      { element = element.parentNode; if(element==this.update) return; }
+    this.hide();
+    this.active = false;
+  }, 
+  
+  render: function() {
+    if(this.entry_count > 0) {
+      for (var i = 0; i < this.entry_count; i++)
+        this.get_entry(i).className =
+          this.index==i ? 'selected' : '';
+        
+      if(this.has_focus) { 
+        if(this.get_current_entry().scrollIntoView) 
+          this.get_current_entry().scrollIntoView(false);
+        
+        this.show();
+        this.active = true;
+      }
+    } else this.hide();
+  },
+  
+  mark_previous: function() {
+    if(this.index > 0) this.index--
+      else this.index = this.entry_count-1;
+  },
+  
+  mark_next: function() {
+    if(this.index < this.entry_count-1) this.index++
+      else this.index = 0;
+  },
+  
+  get_entry: function(index) {
+    return this.update.firstChild.childNodes[index];
+  },
+  
+  get_current_entry: function() {
+    return this.get_entry(this.index);
+  },
+  
+  select_entry: function() {
+    this.hide();
+    this.active = false;
+    value = Text.decodeHTML(Text.stripTags(this.get_current_entry().innerHTML));
+    this.element.value = value;
+    this.element.focus();
+  }
+});

railties/lib/rails_generator/generators/components/scaffold/templates/style.css

@@ -16 +16 @@
-a:visited { color: #666; }
-a:hover { color: #fff; background-color:#000; }
-
+.autocomplete { 
+  position:absolute; 
+  z-index:10; 
+  border:1px solid #aaa; 
+  background-color:#fff; 
+}
+.autocomplete ul, .autocomplete li { margin:0; padding:0; border: 0; }
+.autocomplete li { padding:2px; display:block; cursor:pointer; }
+.autocomplete .selected { background-color: #ffa; }
+
-.fieldWithErrors {
-  padding: 2px;
-  background-color: red;