diff --git a/lib/ajax-chosen.js b/lib/ajax-chosen.jquery.js similarity index 100% rename from lib/ajax-chosen.js rename to lib/ajax-chosen.jquery.js diff --git a/lib/ajax-chosen.proto.js b/lib/ajax-chosen.proto.js new file mode 100644 index 0000000..8dd65e8 --- /dev/null +++ b/lib/ajax-chosen.proto.js @@ -0,0 +1,67 @@ +(function() { + var ajaxChosen, root; + var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) { + for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } + function ctor() { this.constructor = child; } + ctor.prototype = parent.prototype; + child.prototype = new ctor; + child.__super__ = parent.prototype; + return child; + }; + root = this; + ajaxChosen = (function() { + __extends(ajaxChosen, Chosen); + ajaxChosen.prototype.activate_field = function() { + if (this.options.show_on_activate && !this.active_field) { + this.results_show(); + } + return ajaxChosen.__super__.activate_field.apply(this, arguments); + }; + function ajaxChosen(select, options, callback) { + this.options = options; + ajaxChosen.__super__.constructor.call(this, select, options); + select.next('.chzn-container').down('.chzn-search > input').observe('keyup', function() { + var field, query_key, success, val; + val = $(this).value.strip(); + if (val.length < 3 || val === $(this).readAttribute('data-prevVal')) { + return false; + } + $(this).writeAttribute('data-prevVal', val); + field = $(this); + query_key = options.query_key || "term"; + (options.parameters || (options.parameters = {}))[query_key] = val; + success = options.success; + options.onSuccess = function(data) { + var items; + if (!(data != null)) { + return; + } + select.childElements().each(function(el) { + if (!el.selected) { + return el.remove(); + } + }); + items = callback ? callback(data.responseJSON) : data.responseJSON; + $H(items).each(function(pair) { + if (select.value !== pair.key) { + return select.insert({ + bottom: new Element("option", { + value: pair.key + }).update(pair.value) + }); + } + }); + val = field.value; + select.fire("liszt:updated"); + field.value = val; + if (success != null) { + return success(); + } + }; + return new Ajax.Request(options.url, options); + }); + } + return ajaxChosen; + })(); + root.ajaxChosen = ajaxChosen; +}).call(this); diff --git a/src/ajax-chosen.coffee b/src/ajax-chosen.jquery.coffee similarity index 100% rename from src/ajax-chosen.coffee rename to src/ajax-chosen.jquery.coffee diff --git a/src/ajax-chosen.proto.coffee b/src/ajax-chosen.proto.coffee new file mode 100644 index 0000000..aa641de --- /dev/null +++ b/src/ajax-chosen.proto.coffee @@ -0,0 +1,88 @@ +root = this + +class ajaxChosen extends Chosen + activate_field: -> + if @options.show_on_activate and not @active_field + this.results_show() + super + + constructor: (select, @options, callback) -> + # Load chosen. To make things clear, I have taken the liberty + # of using the .chzn-autoselect class to specify input elements + # we want to use with ajax autocomplete. + super select, options + + # Now that chosen is loaded normally, we can bootstrap it with + # our ajax autocomplete code. + select.next('.chzn-container') + .down('.chzn-search > input') + .observe 'keyup', -> + # This code will be executed every time the user types a letter + # into the input form that chosen has created + + # Retrieve the current value of the input form + val = $(this).value.strip() + # Some simple validation so we don't make excess ajax calls. I am + # assuming you don't want to perform a search with less than 3 + # characters. + + return false if val.length < 3 or val is $(this).readAttribute('data-prevVal') + + # Set the current search term so we don't execute the ajax call if + # the user hits a key that isn't an input letter/number/symbol + $(this).writeAttribute('data-prevVal', val) + + # This is a useful reference for later + field = $(this) + + # I'm assuming that it's ok to use the parameter name `term` to send + # the form value during the ajax call. Change if absolutely needed. + query_key = options.query_key || "term" + (options.parameters ||= {})[query_key] = val + + # If the user provided an ajax success callback, store it so we can + # call it after our bootstrapping is finished. + success = options.success + + # Create our own callback that will be executed when the ajax call is + # finished. + options.onSuccess = (data) -> + # Exit if the data we're given is invalid + return if not data? + + # Go through all of the