Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #960 (closed enhancement: invalid)

Opened 3 years ago

Last modified 2 years ago

[PATCH] Ajax remote autocompletion with text fields

Reported by: madrobby Assigned to: thomas@fesch.at
Priority: normal Milestone:
Component: ActionPack Version: 0.11.0
Severity: normal Keywords: ajax autocomplete
Cc:

Description

This enhancements adds complete support for remote autocompletion for text fields. Tested in Firefox 1.0 (Mac/Win), IE 5.5., IE 6.0, Safari. Opera 7.23 is reportedly broken.

What's in: - new Ajax.Autocomplete Jacascript Object, some Helper Javascript Objects - JavascriptHelper.autocomplete_for Helper (see RDoc) - JavascriptHelper.autocomplete_responder (see RDoc) - FormHelper.text_field now supports :remote_autocomplete and :indicator (no Doc yet) - Special handling for IE, so select elements won't overlap the autocomplete popup - HTML-Elements in autocomplete return are stripped before they are put in the text

field, so you can have images and other markup in the autocomplete popup

Example usage:

Action:

def autocomplete 
 @items = Item.find_all [ 'LOWER(description) LIKE ?', '%' + @params["for"].downcase + '%' ], 'description ASC', 10
 @mark = @params["for"]
 render_without_layout
end

View:

<%= autocomplete_responder @items, 'description', @mark %>

Form:

<%= text_field 'items', 'description', 
  { :remote_autocomplete => { :controller => 'upload', :action => 'autocomplete' },
    :indicator => '/images/indicator.gif'
   }  %> 

Notes:

The addition of @controller = @template_object.controller # url_for in :remote_autocomplete breaks many tests (but not the real functionality), hopefully someone can look after that and find a solution.

Attachments

remote_autocomplete.diff (47.4 kB) - added by madrobby on 03/27/05 18:01:25.
remote_autocomplete_v2.diff (23.8 kB) - added by madrobby on 03/27/05 18:13:32.
Last file was "doubled". Here is the correct patch!
remote_autocomplete_v3.diff (25.4 kB) - added by madrobby on 03/27/05 23:35:21.
Fixes a problem with decodeHTML. Also, added Effect.Fade (not used by autocompleter)
autocomplete_addtion.js (0.8 kB) - added by madrobby on 03/28/05 21:52:40.
This is an addition to patch _v3, which allows for user-definable html elements which text nodes shouldn't be transferred to the input field value.

Change History

03/27/05 18:01:25 changed by madrobby

  • attachment remote_autocomplete.diff added.

03/27/05 18:13:32 changed by madrobby

  • attachment remote_autocomplete_v2.diff added.

Last file was "doubled". Here is the correct patch!

03/27/05 23:35:21 changed by madrobby

  • attachment remote_autocomplete_v3.diff added.

Fixes a problem with decodeHTML. Also, added Effect.Fade (not used by autocompleter)

03/28/05 14:19:55 changed by anonymous

  • keywords changed from ajax autocomplete to ajax autoc879omplete.
  • priority changed from normal to lowest.
  • version changed from 0.11.0 to 0.9.4.
  • component changed from ActionPack to RailTies.
  • severity changed from enhancement to critical.

03/28/05 15:42:57 changed by mortonda@dgrmm.net

  • keywords changed from ajax autoc879omplete to ajax autocomplete.
  • priority changed from lowest to normal.
  • version changed from 0.9.4 to 0.11.0.
  • component changed from RailTies to ActionPack.
  • severity changed from critical to enhancement.

fixing apparent vandelism to ticket

03/28/05 21:52:40 changed by madrobby

  • attachment autocomplete_addtion.js added.

This is an addition to patch _v3, which allows for user-definable html elements which text nodes shouldn't be transferred to the input field value.

03/28/05 21:56:41 changed by madrobby

The file autocomplete_addition allows for class="informal" (or class="other_classes informal other_classes") elements in the ajax return, which text nodes show up in the update popup, but don't get transferred to the input field element on selection. HTML tags are always stripped.

This allows for a return like this: <ul><li>some text - <img src=""/><span class="warning informal">only display me in the popup</span> some other <important>maybe important</important> text</li><ul>.

If selected, the input field's value will be changed to: "some text - some other maybe important text"

04/12/05 07:01:39 changed by c.r.mcgrath@gmail.com

Great patch! A few lines of code, some css, and suddenly I'm doing Google Suggest :)

I did notice one small issue though. If I tab into a text field, type a few characters really quickly, then tab out again the div still appears, but doesn't work very well as the focus is now on another text field. Perhaps it could check to see if the textfield still has the focus before popping up the div.

04/24/05 16:02:28 changed by madrobby

Please note that I've sent the prototype part of this patch off to Sam as a darcs patch bundle. On the way I've included a test page and cleaned the Event stuff up quite a bit.

05/25/05 12:38:00 changed by anonymous

you guys might also take a peek at a project i've just open-sourced, it's called "wick: web input completion kit". It currently does not support xmlhttprequest and was originally designed with web-based mail applications as its primary use-case. It won't be hard to include remote data though. The whole matching logic works off of a client-side JS array called "collection", and does caching of results as you type, for better performance.

http://wick.sf.net/

06/15/05 03:15:03 changed by madrobby

  • priority changed from high to normal.
  • version changed from 0.8 to 0.11.0.
  • component changed from RailTies to ActionPack.
  • severity changed from major to enhancement.
  • summary changed from dfgdf to [PATCH] Ajax remote autocompletion with text fields.

06/21/05 07:33:49 changed by anonymous

  • owner changed from David to sam@conio.net.

06/25/05 11:52:18 changed by anonymous

  • owner changed from sam@conio.net to thomas@fesch.at.

06/26/05 03:52:07 changed by madrobby

  • status changed from new to closed.
  • resolution set to invalid.

This patch will be included in a big "script.aculo.us" additions patch, due soon.