Selectable Auto Complete

* The tag implementation that we currently have should be modified and re-factored to what is in this video on the Screen Design page: https://wiki.exphosted.com/doku.php/screendesigns - Tag Dropdown Video

* And, this should be a reusable component.

The implementation is done by making use of existing auto_completer plugin. The typical differences between the required component and the existing auto_complete are

1. The panel should be dockable on the UI.
2. We should be able to select multiple items from the response.

• 1. is implemented by extending the Ajax.Autocompleter class and over writing the onClick and onBlur methods so that the response panel is not hidden on click/focus out.
• 2. is implemented by “selectable_auto_complete_response” method in a helper file so that the response contains the check boxes. But we should use Ajax.Update here instead render inline so that the response just updates a specified “div”.
• To have the previously selected check boxes checked, the simplest way is to pass them as parameters along with the request and let the response from server handle the selection.

The component is available as a helper(SelectableAutoCompleteHelper) in the application.

Files to include -

 crossbow/trunk/public/javascripts/selectable_auto_completer.js
 crossbow/trunk/public/stylesheets/selectable_auto_completer.css 

The css file can be overriden/replaced to have the required styles.

It can be used in the Haml view as

text_field_with_selectable_auto_complete(field_name, default_values_array, url_options, display_options, completions_options)

• field_name - the form element name you would like to have the selected values. A hidden field is created with this name which will have a comma separated list of all the selected values.
• default_values_array - Array of already selected items. They are shown as selected when auto complete response contains them.
• url_options - the form url which returns the response for auto complete request. The request is sent with parameter field_name_query. The action should update “auto_complete_content” div with the response. The response is constructed by passing the result set to selectable_auto_complete_result method.
• display_options - currently two are supported.
  1. :link_test - The text to be shown on “choose” link. If noting is passed field_name is displayed.
  2. :new_field_div - This option is passed when the chooser is already on a light box window. This is the the div that should be replaced by the response of the “New field” link click. If this is not passed, by default new field is opened in a lightbox.

UI screenshot