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: Option adding (with custom callback) #166

Open
wants to merge 6 commits into
from

Conversation

Member

koenpunt commented Aug 27, 2012

Option adding

You can specify a create_option option, which can be a boolean or callback function.

Example for allowing adding of new items:

$(function() {
  $(".chzn-select").chosen({
    create_option: true,
    // persistent_create_option decides if you can add any term, even if part
    // of the term is also found, or only unique, not overlapping terms
    persistent_create_option: true,
    // with the skip_no_results option you can disable the 'No results match..' 
    // message, which is somewhat redundant when option adding is enabled
    skip_no_results: true
  });
});

Or with a callback and an AJAX request to, for example, save the terms in your database:

$(function() {
  $(".chzn-select").chosen({
    create_option: function(term){
      var chosen = this;
      $.post('add_term.php', {term: term}, function(data){
        chosen.append_option({
          value: 'value-' + data.term,
          text: data.term
        });
      });
    }
  });
});

Custom text

Through the options it is also possible to customize the text used in the 'Add option' link, like so:

$(function() {
  $(".chzn-select").chosen({
    create_option_text: 'Create category'
  });
});

I'll try to keep my release up to date with harvesthq/master: https://github.com/koenpunt/chosen/releases

This is great! Would it be easy to make it so hitting the enter key also triggers the "add item" so you don't have to click the link? The enter key already works for selecting existing items from the list. Thanks!

Member

koenpunt commented Aug 8, 2011

That was in my case intentionally left out, so the user is really aware of adding new items. But maybe I will add it as a extra option.

Any desire to bundle this with the jquery plugin?

bewest commented Dec 19, 2011

I believe this is a good candidate for solving issue #5.

Member

koenpunt commented Dec 19, 2011

I also fixed some small things, and updated my first comment here with the correct usage examples.

Also the functionality in the prototype version now matches with the jquery version again.

edrex commented Dec 26, 2011

+1 on UI
+1 on code review

I'm using this branch on a site, hope it gets merged soon.

matheo commented Mar 13, 2012

@harvesthq There's any idea if this will be merged?

I'm a third party developer of the Zikula Web Application Framework, and we're interested to include Chosen on the bundled libraries, but this feature is very useful and seems that there's no attention to this pull request.

Personally, I'm using @koenpunt's master branch because it does what I need at this moment, but will anybody review the quality of this PR (I can't because my JS skills are low) and include this in the main project?

This is a feature requested months ago by a ot of people, and would be good to know if someone will take care of this,
or if end-users will have to choose between the main project or koenpunt's fork.

Thanks for the great job.

sontek commented Mar 15, 2012

Is this going to be merged in? I need to dynamically create items in the list.

bewest commented Mar 17, 2012

@matheo I performed a code review on several branches solving issue #5 and recommended this one, FWIW.

sontek commented Mar 19, 2012

If this isn't a good patch that could be merged, just let me know why and I will make the changes needed, I really want this feature put into chosen.

+1 For getting this merged in.
Would also be good to have option for enter key to triggers the "add item"

@stof stof referenced this pull request Apr 3, 2012

Closed

Adding new options on the fly #520

This would be really helpful. Please merge!

@edrex edrex referenced this pull request Apr 12, 2012

Closed

Adding entries on the fly #578

ixti commented Apr 25, 2012

This is really awesome feature, that chosen lack of.

👍

+1 for merging this into master

Wants this as well

+1

+1

+!

JCKodel commented May 7, 2012

There is a bug when a OnChange event is present for the tag. When creating a new option, the OnChange event must be triggered, because the selection was changed Chosen.prototype.select_append_option = function (options) { var option; option = $('<option />', options).attr('selected', 'selected'); this.form_field_jq.append(option); this.form_field_jq.trigger("liszt:updated"); this.form_field_jq.trigger("change"); // ADD THIS LINE TO FIRE THE CHANGE EVENT return this.search_field.trigger('focus'); }; I needed the OnChange event to enable the submit button when a item is available in the chosen autocomplete (there was none, and I added one with the new create_option config)

Yoda6 commented May 11, 2012

+1 ! Great feature !

tute commented May 16, 2012

+1

@koenpunt Thanks so much for the awesome plugin. Can you please help me. I'd like to get the below code to trigger a change event even when a new business is typed in, and not selected from the autocomplete options. Cheers, Abran

$(function() {
$("#dispenser_business_id").chosen({
create_option: true,
persistent_create_option: true,
create_option_text: 'Create New Business'
}).change( function() {$('#myModal').modal({})});
});

fson commented Jul 12, 2012

+1 This is a very useful feature.
However adding options to multiple select seems to be broken at the moment. If you add a new item and then start to type in the name of the next one that text it is removed. Starting to type again brings it back to normal.

fson commented Jul 16, 2012

The problem I reported seems to be fixed now. Works fine!

Member

koenpunt commented Jul 16, 2012

@funkdified To get back on you, you could use the callback:

$(function() {
   $("#dispenser_business_id").chosen({
      create_option: function(term) {
         this.append_option({
            value: term,
            text: term
         });
         $('#myModal').modal({});
      },
      persistent_create_option: true,
      create_option_text: 'Create New Business'
   });
});

@koenpunt thanks for your changes... I didn't know if you already had option not to show "ADD" for items that are already in the list so I did my own version for jQuery - I hope somebody can integrate it with prototype if it's needed:

$(this.form_field).find('option').filter(function() { return ($(this).text() == terms); }).length == 0

That's the condition I've added in no_results method; i.e:

Chosen.prototype.no_results = function(terms) {
  var no_results_html;
  no_results_html = $('<li class="no-results">' + this.results_none_found + ' "<span></span>"</li>');
  no_results_html.find("span").first().html(terms);
  this.search_results.append(no_results_html);
  if (this.create_option && $(this.form_field).find('option').filter(function() { return ($(this).text() == terms); }).length == 0) { // added second condition
    return this.show_create_option(terms);
  }
};
Member

koenpunt commented Jul 17, 2012

@mikke123 Setting persistent_create_option to false or not supplying it al all should already take care of that.

Member

koenpunt commented Jul 17, 2012

@mikke123 But I noticed that I forgot to implement persistent_create_option in the Prototype version, or it got lost in a merge, anyway; its back.

Does anyone know when / if this will be merged into the main repository?

any reason this hasn't been merged in?

cubiic commented Aug 19, 2012

plz update , would love to see this merged in

j1z0 commented Aug 22, 2012

+1 please merge

cubiic commented Aug 22, 2012

it is merged and forked https://github.com/koenpunt/chosen

+1 please merge, what's the holdup?

Collaborator

stof commented Sep 3, 2012

@pfiller ping

@koenpunt The diff looks weird. Did you mess the last update to harvesthq/master ?

Member

koenpunt commented Sep 3, 2012

@stof what looks weird? And yes recently merged it with harvesthq/master

@koenpunt koenpunt closed this Sep 3, 2012

@koenpunt koenpunt reopened this Sep 3, 2012

Collaborator

stof commented Sep 3, 2012

@koenpunt the last commit does not look like a proper merge commit, meaning your PR duplicates some changes done in master recently

croaky commented Sep 20, 2012

It looks like this could use another rebase.

Once it has, I'll add to the chorus of +1's! I need this feature on the app I'm working on at the moment.

croaky commented Sep 21, 2012

@stof @pfiller I just took a stab at creating a one-commit patch for this pull request, maintaining @koenpunt as the author:

https://github.com/croaky/chosen/commit/ecc52da4a383f96cab5da8973be5c916922a15dd

It should merge cleanly against harvesthq/chosen:

git remote add croaky git://github.com/croaky/chosen.git
git fetch croaky
git cherry-pick ecc52da4a383f96cab5da8973be5c916922a15dd

I'm currently figuring out how to confirm the functionality still works.

croaky commented Sep 21, 2012

I've confirmed the functionality of this feature works as expected:

create_option: true

+1 great work
if i don't want to add new values already via ajax, but after the submit, is there an easy way to decide whether the value is the database-key of an loaded option, or just a via js new added integer value?

example:
option label="100" value="649">100 (loaded from db)
option label="1000" value="429">1000 (loaded from db)
option label="10" value="10">10 (added via js, stored in db after submit)

if there would be an record in db with the key "10" and value="123", there is no way to distinguish them

thx 4any help

hesna commented Oct 3, 2012

+1
great and useful, thanks!

stianl commented Oct 11, 2012

Merge?

@gentoo-pl gentoo-pl referenced this pull request in tsechingho/chosen-rails Oct 11, 2012

Closed

Option create new #9

inkel commented Nov 7, 2012

So, has this feature already being merged or not? It would be a killer feature I think.

oranze commented Jun 30, 2014

Please add it to Master and into release

@oranze oranze referenced this pull request Jun 30, 2014

Closed

coffee compile troubles #1998

reidab pushed a commit to reidab/calagator that referenced this pull request Jul 1, 2014

sheam commented Nov 13, 2014

+1

dmitry commented Nov 13, 2014

@sheam +1 doesn't mean anything here ;)

amboy00 commented Dec 1, 2014

FWIW, this fork is great, I'm using it on my own project and this option is a big benefit to an already great product.

Is it possible to
1- Define the list of events which make the option be added "for example, hitting the enter, pressing the tab, text box lost focus ..." ?!
2- Set how many new items could be added to option ?!

@tjschuck tjschuck referenced this pull request Feb 18, 2015

Closed

Combobox #2240

lucianjp commented Mar 2, 2015

Will this fork be updated to 1.3.0?

lepipele commented Apr 8, 2015

<rant>
Man... @pfiller you have a freaking contributor @koenpunt who has stuck with this for 3 YEARS!!! Instead of selling empty story about general direction in those 3 years you could've merged all this already. And your philosophical excuse for not including this - select boxes shouldn't have add option - by that logic we all should be using corded phones - hey that's the way they were initially envisioned.
</rant>

Member

koenpunt commented Apr 8, 2015

Emphasis on the rant wasn't necessary, that was clear as is. But I've long settled with this not being merged into the core of Chosen. Although I'm still rooting for an extendable Chosen. So that one could do something in the lines of:

$('select').chosen({plugins: ['option-adding']});

(cc: #2275 #1647)

@chillu chillu referenced this pull request in silverstripe/silverstripe-blog Apr 8, 2015

Closed

Added tag field #174

lepipele commented Apr 8, 2015

@koenpunt I've wrapped my text in rant just to make sure that everybody gets the intent. Not everyone is smart as you (myself included). As for how exactly this should be implemented - really ANYTHING would work at this point. What I don't get it why complicate... why get into all this "extendable" Chosen stuff... couldn't they already exposed just item.add/item.delete interface along with event for no result found and say - here use that?

@lepipele I gave up on the merge and started using @koenpunt's version directly. In fact, I extended it based on our UX needs. koenpunt#48

Member

koenpunt commented Apr 8, 2015

@lepipele surely, adding features is easy, but every feature that's added, has to be maintained. So an extension based structure is preferred over an feature loaded codebase, like ripoff fork of Chosen; Select2)

lepipele commented Apr 8, 2015

@dkavanagh Yeah, that's how I've solved the problem I've had yesterday - luckily found this page: https://github.com/koenpunt/chosen/releases

Just, we really shouldn't rely on good will of koenpunt - he can't keep merging this stuff indefinitely - it simply makes no sense to create extra work for him just so project owner can play idle. That and I was just shocked to discover that after 3 years this whole saga with merging this feature is still running.

lepipele commented Apr 8, 2015

@koenpunt Sure... I'm first for modularity over if{}elseif{}elseif{}else{}. However, it's quite safe to say that it's unlikely that project owners will dedicate time to create full fledged extension framework when they can't take time to merge already prepared quality pulls.

Which is why I am suggesting to just expose bare minimum which would make your plugin possible so that you can stop merging, separate your code to another file that we can import in addition to base and have all this end already.

That way they wouldn't have to maintain anything - from my point of view item.add and event for no result found - should be a part of public interface anyway.

Member

koenpunt commented Apr 8, 2015

@lepipele I'm a project contributor, which means I could merge if I want to. But I respect the direction @pfiller / @harvesthq has chosen for Chosen. And besides the contributions that don't get merged, there are a lot that are merged as you can see on the contributors page: https://github.com/harvesthq/chosen/graphs/contributors.

lepipele commented Apr 8, 2015

@koenpunt Far from it that I am suggesting you merge on your own without approval of project owner. What I am suggesting is that project owner already corrects his stance which is simply wrong.

I.e. if he doesn't want this feature in because "select UI elements conceptually shouldn't have ability to add new items", then expose appropriate events and properties (which conceptually should be part of any well implement select UI element.. and for your plugin they need to expose just few of those) and allow implementation of add new item that way. Project owner gets his conceptual cohesion, you get to cleanly implement add new item and stop merging, and us poor souls that are trying to use this component in their projects get to save some time instead of manually merging your changes / trying to compile on their own whenever main branch advances.

...

And let that be it from me - I'll stop bothering you guys with messages on this pull.

dmitry commented Apr 8, 2015

What a long story... 💤

Member

koenpunt commented Apr 8, 2015

The main reason is that, for whatever reason it may be, someone could have javascript disabled, which makes the feature of adding options unavailable. And yes, search etc. won't be available either, but the options are reachable by means of a normal html select.

ababich commented Jun 2, 2015

@koenpunt , I suggest that major reason people wants to use the feature is to use some predefined values with ability to use custom values

For example you make smth like group chat:

  1. you have chosen field to add users from predefined list (for ex., your friends)
  2. in the same field you can input not predefined users (for ex., some special recipients)

and you do not want any additional actions for this, just have new custom values in form serialisation - is this possible without this pull request?

PS. Basically, we use this pull for two years w/o any significant issues, but it's become more and more tough thing to maintain this merge into chosen manually

Thank you awesome job!

+1

RavenXce added a commit to RavenXce/chosen-rails that referenced this pull request Jan 12, 2016

It has been almost 5 years now since this PR was made, can we please merge this?

lkraav commented Mar 10, 2016

It has been almost 5 years now since this PR was made, can we please merge this?

All projects I know of are moving to select2.js if they haven't already.

Yep, chosen dieded

ram4nd commented Aug 25, 2016

+1

mav2287 commented Nov 17, 2016

so is it getting merged or what?

sawest commented Apr 6, 2017

Switched to select2

Also looking forward to see this PR merged.

Also hoping to see this merged soon.

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