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

Add the ability to set a custom value just typing into search field #749

Closed
wants to merge 7 commits into
from

Conversation

Projects
None yet
9 participants

Add the ability to set a custom value just typing into search field

  • The new texts accept custom values;
  • Add option to active that behavior adding a class "chzn-custom-value" to select or specifying an option "allow_custom_value"= true;
  • The custom values are added a new group at the end of the option list;

andergmartins added some commits Aug 2, 2012

@andergmartins andergmartins Add the ability to set a custom value just typing into search field
Add the ability to set a custom value just typing into search field

- The new texts accept custom values;
- Add option to active that behavior adding a class "chzn-custom-value" to select or specifying an option "allow_custom_value"= true;
- The custom values are added a new group at the end of the option list;
6f1e622
@andergmartins andergmartins Update README text with some tips about new edit mode 593e71e
@andergmartins andergmartins Update README with examples f693e91
@andergmartins andergmartins Fix a bug that allowed add a new value even without configure for that 5374e15

jsom commented Aug 9, 2012

I dig it. Exactly what I needed -- thanks man.

FiXato commented Aug 16, 2012

andergmartins: could you also make this work with dropdowns that accept multiple values? I would highly appreciate it. :)

Hey! Sure! But I can't do it this week... maybe next week

sordahl commented Aug 24, 2012

Awesome, just what I needed (plus the multiple option FIXato mentioned would rock)

FiXato commented Aug 27, 2012

Thanks in advance, looking forward to it :)

@stof stof commented on the diff Sep 3, 2012

// Version #{version()}
// Full source at https://github.com/harvesthq/chosen
// Copyright (c) 2011 Harvest http://getharvest.com
+//
+// Changelog:
+// [2012-08-02] - Add option to specify a custom value on the fly [Anderson Grüdtner Martins]
@stof

stof Sep 3, 2012

Collaborator

the changelog is not maintained here

@stof stof commented on the diff Sep 3, 2012

README.md
http://harvesthq.github.com/chosen
+### Adding a new option on the fly
+
+You can configure it to accept new values on the fly, just typing into the search field.
+There is 2 ways to do that:
+
+Add a class "chzn-custom-value" to the original select field:
+```
+<select id="list" class="chzn-custom-value">...
+```
+
+Or add an option "allow_custom_value: true" to the constructor:
+```
+$(#list).chosen({allow_custom_value: true});
+```
@stof

stof Sep 3, 2012

Collaborator

you should put it in the doc instead

Ok, I will fix that.
I still don't have time to improve it to support the multiple options, but I will.

sordahl commented Sep 30, 2012

Any news on a multiple option fix?

Ow man, sorry... no yet

I found a way to make custom values work with multiple options but this might cause other issues, I did not tested throughly.

Here's my fix, at line 794 remove condition "if(!this.is_multiple)":

    return this.search_field_scale();
  } else /*if (!this.is_multiple) */{
    value = this.search_field.val();
    group = this.add_unique_custom_group();
    option = $('<option value="' + value + '">' + value + '</option>');

It's me again, did not encountered any issue yet with the previous modification

Hey schartier. That worked. Thank You!

Lytho commented Jan 7, 2013

Hi everyone,

I'm not sure to understand this thread : is this improvement on the git version?

Does this evolution enable the following :
"I type 'hello' in a multiple select; 'hello' is not found in the dropdown list; 'hello' will be the value posted if the user does not delete it" ?

@Lytho , this makes it also possible to have multiple "custom" values

Lytho commented Jan 7, 2013

Very cool then. Exactly what I need :)

Lytho commented Jan 7, 2013

Is there a way so that we don't need to press enter to add the value? I mean, just focusout in that case should add the new value, it's more comfortable don't you think? Or click out.

Lytho commented Jan 7, 2013

The code in its state doesn't work in the following case :

Values of my select : "hellow". I type "hello" and want it to be a new value, so I press enter. But "hellow" is found and selected, so it's "hellow" that is taken. Hence the need to be able to set a new custom value from a simple click out of the search container. I'm working on it.

Look for the following code:

if (this.is_multiple) {
container_div.html('<ul class="chzn-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>');
} else {
container_div.html('<a href="javascript:void(0)" class="chzn-single chzn-default"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" autocomplete="off" /></div><ul class="chzn-results"></ul></div>');
}

notice the autocomplete="off" if this.is_multiple... You must add the attribute multiple="multiple" to your original <input> tag or modify the script by adding the attribut in the else condition.

Lytho commented Jan 9, 2013

I went for select2 plug-in finally, which proposes this kind of stuff as a basis.

andergmartins added some commits Mar 28, 2013

@andergmartins andergmartins Merge branch 'master' of github.com:harvesthq/chosen
Conflicts:
	chosen/chosen.jquery.js
	chosen/chosen.jquery.min.js
	chosen/chosen.proto.js
	chosen/chosen.proto.min.js
	coffee/lib/abstract-chosen.coffee
71d515d
@andergmartins andergmartins Fix attr allow_custom_value 5763d79
@andergmartins andergmartins Allow to add custom values for selects with multiple selection 750af82
Contributor

pfiller commented Apr 26, 2013

Thanks so much @andergmartins. I'm really sorry about the slow review process.

Though I'm still hesitant about adding this kind of functionality, I think any implementation that does land in master is going to need some kind of visual interface for the user to interact with. Relying on the user to know they can press enter to get their option added is not likely to be enough for most people.

Ultimately, I think #166 is a more satisfying implementation of option adding. It provides an interface any user can understand which makes for a more satisfying experience as a user.

Thanks again.

@pfiller pfiller closed this Apr 26, 2013

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