Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Filter already selected results from the drop down options. #17

Closed
wants to merge 1 commit into from

2 participants

@digidanny

Staying consistent with Chosen, we should probably remove already
selected options from the drop down in a multi select.

@digidanny digidanny Filter already selected results from the drop down options.
Staying consistent with Chosen, we should probably remove already
selected options from the drop down in a multi select.
50c5619
@mikejolley mikejolley referenced this pull request from a commit in mikejolley/ajax-chosen
@mikejolley mikejolley Includes changes from @digidanny #17 and uses 'each' so multiple chos…
…en elements work independently. Closes #21.

Needed elements to work independently to work with WooCommerce.
13115cb
@meltingice meltingice closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 8, 2012
  1. @digidanny

    Filter already selected results from the drop down options.

    digidanny authored
    Staying consistent with Chosen, we should probably remove already
    selected options from the drop down in a multi select.
This page is out of date. Refresh to see the latest.
Showing with 126 additions and 89 deletions.
  1. +111 −81 lib/ajax-chosen.js
  2. +15 −8 src/ajax-chosen.coffee
View
192 lib/ajax-chosen.js
@@ -1,84 +1,114 @@
-
-(function($) {
- if ($ == null) $ = jQuery;
- return $.fn.ajaxChosen = function(settings, callback) {
- var chosenXhr, defaultOptions, options, select;
- if (settings == null) settings = {};
- if (callback == null) callback = function() {};
- defaultOptions = {
- minTermLength: 3,
- afterTypeDelay: 500,
- jsonTermKey: "term"
- };
- select = this;
- chosenXhr = null;
- options = $.extend({}, defaultOptions, settings);
- this.chosen();
- this.next('.chzn-container').find(".search-field > input").bind('keyup', function() {
- var field, msg, val;
- val = $.trim($(this).attr('value'));
- msg = val.length < options.minTermLength ? "Keep typing..." : "Looking for '" + val + "'";
- select.next('.chzn-container').find('.no-results').text(msg);
- if (val.length < options.minTermLength || val === $(this).data('prevVal')) {
- return false;
+(function() {
+ (function($) {
+ if ($ == null) {
+ $ = jQuery;
+ }
+ return $.fn.ajaxChosen = function(settings, callback) {
+ var chosenXhr, defaultOptions, options, select;
+ if (settings == null) {
+ settings = {};
}
- if (this.timer) clearTimeout(this.timer);
- $(this).data('prevVal', val);
- field = $(this);
- if (!(options.data != null)) options.data = {};
- options.data[options.jsonTermKey] = val;
- if (typeof success === "undefined" || success === null) {
- success = options.success;
+ if (callback == null) {
+ callback = function() {};
}
- options.success = function(data) {
- var items;
- if (!(data != null)) return;
- select.find('option').each(function() {
- if (!$(this).is(":selected")) return $(this).remove();
- });
- items = callback(data);
- $.each(items, function(value, text) {
- return $("<option />").attr('value', value).html(text).appendTo(select);
- });
- select.trigger("liszt:updated");
- if (typeof success !== "undefined" && success !== null) success();
- return field.attr('value', val);
+ defaultOptions = {
+ minTermLength: 3,
+ afterTypeDelay: 500,
+ jsonTermKey: "term"
};
- return this.timer = setTimeout(function() {
- if (chosenXhr) chosenXhr.abort();
- return chosenXhr = $.ajax(options);
- }, options.afterTypeDelay);
- });
- return this.next('.chzn-container').find(".chzn-search > input").bind('keyup', function() {
- var field, val;
- val = $.trim($(this).attr('value'));
- if (val.length < options.minTermLength || val === $(this).data('prevVal')) {
- return false;
- }
- field = $(this);
- options.data = {};
- options.data[options.jsonTermKey] = val;
- if (typeof success === "undefined" || success === null) {
- success = options.success;
- }
- options.success = function(data) {
- var items;
- if (!(data != null)) return;
- select.find('option').each(function() {
- return $(this).remove();
- });
- items = callback(data);
- $.each(items, function(value, text) {
- return $("<option />").attr('value', value).html(text).appendTo(select);
- });
- select.trigger("liszt:updated");
- field.attr('value', val);
- if (typeof success !== "undefined" && success !== null) return success();
- };
- return this.timer = setTimeout(function() {
- if (chosenXhr) chosenXhr.abort();
- return chosenXhr = $.ajax(options);
- }, options.afterTypeDelay);
- });
- };
-})($);
+ select = this;
+ chosenXhr = null;
+ options = $.extend({}, defaultOptions, settings);
+ this.chosen();
+ this.next('.chzn-container').find(".search-field > input").bind('keyup', function() {
+ var field, msg, val;
+ val = $.trim($(this).attr('value'));
+ msg = val.length < options.minTermLength ? "Keep typing..." : "Looking for '" + val + "'";
+ select.next('.chzn-container').find('.no-results').text(msg);
+ if (val.length < options.minTermLength || val === $(this).data('prevVal')) {
+ return false;
+ }
+ if (this.timer) {
+ clearTimeout(this.timer);
+ }
+ $(this).data('prevVal', val);
+ field = $(this);
+ if (!(options.data != null)) {
+ options.data = {};
+ }
+ options.data[options.jsonTermKey] = val;
+ if (typeof success === "undefined" || success === null) {
+ success = options.success;
+ }
+ options.success = function(data) {
+ var items, selected_values;
+ if (!(data != null)) {
+ return;
+ }
+ selected_values = [];
+ select.find('option').each(function() {
+ if (!$(this).is(":selected")) {
+ return $(this).remove();
+ } else {
+ return selected_values.push($(this).val() + "-" + $(this).text());
+ }
+ });
+ items = callback(data);
+ $.each(items, function(value, text) {
+ if (selected_values.indexOf(value + "-" + text) === -1) {
+ return $("<option />").attr('value', value).html(text).appendTo(select);
+ }
+ });
+ select.trigger("liszt:updated");
+ if (typeof success !== "undefined" && success !== null) {
+ success();
+ }
+ return field.attr('value', val);
+ };
+ return this.timer = setTimeout(function() {
+ if (chosenXhr) {
+ chosenXhr.abort();
+ }
+ return chosenXhr = $.ajax(options);
+ }, options.afterTypeDelay);
+ });
+ return this.next('.chzn-container').find(".chzn-search > input").bind('keyup', function() {
+ var field, val;
+ val = $.trim($(this).attr('value'));
+ if (val.length < options.minTermLength || val === $(this).data('prevVal')) {
+ return false;
+ }
+ field = $(this);
+ options.data = {};
+ options.data[options.jsonTermKey] = val;
+ if (typeof success === "undefined" || success === null) {
+ success = options.success;
+ }
+ options.success = function(data) {
+ var items;
+ if (!(data != null)) {
+ return;
+ }
+ select.find('option').each(function() {
+ return $(this).remove();
+ });
+ items = callback(data);
+ $.each(items, function(value, text) {
+ return $("<option />").attr('value', value).html(text).appendTo(select);
+ });
+ select.trigger("liszt:updated");
+ field.attr('value', val);
+ if (typeof success !== "undefined" && success !== null) {
+ return success();
+ }
+ };
+ return this.timer = setTimeout(function() {
+ if (chosenXhr) {
+ chosenXhr.abort();
+ }
+ return chosenXhr = $.ajax(options);
+ }, options.afterTypeDelay);
+ });
+ };
+ })($);
+}).call(this);
View
23 src/ajax-chosen.coffee
@@ -64,20 +64,27 @@ do ($ = jQuery) ->
return if not data?
# Go through all of the <option> elements in the <select> and remove
- # ones that have not been selected by the user.
- select.find('option').each -> $(@).remove() if not $(@).is(":selected")
-
+ # ones that have not been selected by the user. For those selected
+ # by the user, add them to a list to filter from the results later.
+ selected_values = []
+ select.find('option').each ->
+ if not $(@).is(":selected")
+ $(@).remove()
+ else
+ selected_values.push $(@).val() + "-" + $(@).text()
+
# Send the ajax results to the user callback so we can get an object of
# value => text pairs to inject as <option> elements.
items = callback data
# Iterate through the given data and inject the <option> elements into
- # the DOM
+ # the DOM if it doesn't exist in the selector already
$.each items, (value, text) ->
- $("<option />")
- .attr('value', value)
- .html(text)
- .appendTo(select)
+ if selected_values.indexOf(value + "-" + text) == -1
+ $("<option />")
+ .attr('value', value)
+ .html(text)
+ .appendTo(select)
# Tell chosen that the contents of the <select> input have been updated
# This makes chosen update its internal list of the input data.
Something went wrong with that request. Please try again.