Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
wants to merge 7 commits into from

9 participants

@andergmartins

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
@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

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

@FiXato

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

@andergmartins

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

@sordahl

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

@FiXato

Thanks in advance, looking forward to it :)

@stof stof commented on the diff
((6 lines not shown))
// 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 Collaborator
stof added a note

the changelog is not maintained here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@stof stof commented on the diff
README.md
((6 lines not shown))
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 Collaborator
stof added a note

you should put it in the doc instead

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

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

@sordahl

Any news on a multiple option fix?

@andergmartins

Ow man, sorry... no yet

@schartier

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>');
@schartier

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

@timothymarois

Hey schartier. That worked. Thank You!

@Lytho

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" ?

@schartier

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

@Lytho

Very cool then. Exactly what I need :)

@Lytho

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

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.

@schartier

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

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

andergmartins added some commits
@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
@pfiller
Owner

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 2, 2012
  1. @andergmartins

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

    andergmartins authored
    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;
  2. @andergmartins
  3. @andergmartins
Commits on Aug 3, 2012
  1. @andergmartins
Commits on Mar 28, 2013
  1. @andergmartins

    Merge branch 'master' of github.com:harvesthq/chosen

    andergmartins authored
    Conflicts:
    	chosen/chosen.jquery.js
    	chosen/chosen.jquery.min.js
    	chosen/chosen.proto.js
    	chosen/chosen.proto.min.js
    	coffee/lib/abstract-chosen.coffee
  2. @andergmartins
Commits on Mar 29, 2013
  1. @andergmartins
Something went wrong with that request. Please try again.