Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Feature: tagging multiselect with chosen #1772

Closed
razielanarki opened this Issue Feb 10, 2014 · 1 comment

Comments

Projects
None yet
2 participants

chosen is one of the most useful ux libraries out there, but it's missing a tiny feature:
the ability to add options to multi-selects, as a kind of tagging input, so i hacked the functionality in, for anyone interested.

works with 1.1.0, you'll have to modify the js code a bit.

if the devs request it, i may do a proper pull request, but i'm a total noob in coffeescript :)

so here it is:

  • add the following line toAbstractChosen.prototype.set_default_values

      this.tags_input = (this.options.tags_input && this.is_multiple) || false;
    

    this makes the option toggleable on initialization. (option: tags_input, default: false)

  • and change "case 13" of AbstractChosen.prototype.keyup_checker to

    case 13:
      evt.preventDefault();
      if (this.results_showing)
      {
        if (this.tags_input)
        {
          if (!this.is_multiple || this.result_highlight) {
            return this.result_select(evt);
          }
    
          // do not duplicate options
          var found = false;
          $(this.form_field).find ('option').each (function ()
          {
              if (this.label == $(evt.target).val())
                found = true;
          });
    
          if (!found)
          {
            $(this.form_field).append('<option>' + $(evt.target).val() + '</option>');
            $(this.form_field).trigger('chosen:updated');
            this.result_highlight = this.search_results.find('li.active-result').last();
          }
          else
            $(evt.target).val('');
        }
        return this.result_select(evt);
      }
      break;
    

    this makes chosen add a new option to the select when none is highlighted/found in the dropdown, then updates itself so it can add the new option to the ones already selected.

Contributor

pfiller commented Feb 10, 2014

Thanks, @razielanarki. #166 would add the ability for Chosen to take new options. Might be worth a look!

@pfiller pfiller closed this Feb 10, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment