Custom data-attributes for chosen generated options.

[yhortuk]

This adds a possibility to pass custom data-attributes to generated chosen for further using in styling component etc.

[koenpunt]

Thanks! How does this perform with hundreds or even thousands of options? Also, can you fix the author of your first commit? I'd guess you have run the bower-publish.sh script.

A quick guide for this:

git rebase -i ef72a61^

This should show you the 2 commits. On the first line, change pick to edit, and close the editor. Git will now go over your history and "reopens" that commit for editing.

To update the commit, run:

git commit --amend --reset-author

Simply accept the commit and close the editor.

To finish up, run:

git rebase --continue
git push origin master -f

Now the commit should be yours again.

[yhortuk]

@koenpunt, thank you for taking time for reply.

Here is how long it takes to generate 1 chosen with 10 000 items on my machine.

Libary without my modifications:

Navigated to http://localhost:63342/chosen2/public/index.html
Chosen: 58.970ms
Navigated to http://localhost:63342/chosen2/public/index.html
index.html:10041 Chosen: 52.919ms
Navigated to http://localhost:63342/chosen2/public/index.html
index.html:10041 Chosen: 52.292ms
Navigated to http://localhost:63342/chosen2/public/index.html
index.html:10041 Chosen: 49.433ms

Library with my modifications and with 3 data-attributes on every option:

Navigated to http://localhost:63342/chosen2/public/index2.html
index2.html:10041 Chosen: 144.230ms
Navigated to http://localhost:63342/chosen2/public/index2.html
index2.html:10041 Chosen: 159.257ms
Navigated to http://localhost:63342/chosen2/public/index2.html
index2.html:10041 Chosen: 165.683ms
Navigated to http://localhost:63342/chosen2/public/index2.html
index2.html:10041 Chosen: 111.341ms

Library with my modifications, but without custom data-attributes:

Navigated to http://localhost:63342/chosen2/public/index.html
index.html:10041 Chosen: 59.343ms
Navigated to http://localhost:63342/chosen2/public/index.html
index.html:10041 Chosen: 58.886ms
Navigated to http://localhost:63342/chosen2/public/index.html
index.html:10041 Chosen: 60.917ms
Navigated to http://localhost:63342/chosen2/public/index.html
index.html:10041 Chosen: 59.174ms

I hope that this statistic is what you are looking for further actions on this pull request.

[tjschuck]

@yaroslavk1 Can you add documentation for this as well?

[yhortuk]

@tjschuck, sure.

Here one example of use.

On server side we can generate select with structure like that:

<select class="chosen">
<option data-attr-1="our data">Hello world-1</option>
...
<option data-attr-n="our data">Hello world-n</option>
</select>

Then after chosen initialization we will get something like that:

<ul class="chosen-results">
<li class="active-result" data-option-array-index="1" data-attr-1="our data">Hello world-1</li>
...
<li class="active-result" data-option-array-index="n" data-attr-n="our data">Hello world-n</li>
</ul>

Finally, after all, we can use this data attributes in css with construction like that:

block::before {
  content: attr(data-attr-1);
}

[tjschuck]

@yaroslavk1 Sorry, I meant add docs to the actual documentation 😆

Probably the index.html file (that becomes http://harvesthq.github.io/chosen/) under a new heading, probably after "Custom Width Support".

[koenpunt]

This being here, shouldn't we consider making it so that all attributes of the select options are transferred to the Chosen options?

[koenpunt]

I hope that this statistic is what you are looking for further actions on this pull request.

Yeah these are fine I guess. So when there are data attributes to transfer, Chosen is significantly slower than without them? And of course I know we're talking about milliseconds here, but 3 times slower is still quite a lot. Not saying that that should be problem though.

[yhortuk]

@koenpunt I made small improvement on speed. Now, it is should run 10-30ms faster on the same option count.

Also, I have added configuration option for parser where we can enable/disable data-attributes parsing.

Configuration example:
$('#chosen').chosen({ parser_config : { copy_data_attributes : true } });

@tjschuck I see :laughing: I will add example to the documentation if this changes will be approved.

[yairEO]

I had to know how many Options were there for the select element so I hacked this in:

Chosen.prototype.results_build

this.container.attr('data-options-count', this.form_field.options.length);

Then I was able to know in the CSS if the "chosen" element had 0 options, 1 option or more. I needed to style it differently according to the number of children, and custom attribute was the right solution.

[otonielguajardo]

has this been added in version 1.8.2? doesn't seem to work for me. This is my code

$('.chosen').chosen({ disable_search_threshold: 15, inherit_select_classes: true, no_results_text: "No se encontraron resultados para ", width: "100%", parser_config: { copy_data_attributes: true } });

[koenpunt]

@otonielguajardo it’s not, since this PR isn’t merged

[otonielguajardo]

@koenpunt Oh I see! it's a shame such feature hasn't been officially added since! Isn't there a way to make this possible as is on the latest version of Chosen?

[zhwatts]

Any updates on this? facing a similar requirement where I need to pass data attributes from the parent select list -- am able to work with the build from this PR but would love to see it in the master...

[Jeckerson]

+1, need this. Please decide merge or decline current PR...

[grandiandrea]

Any news on this?

[mythrilium]

Has anyone implemented this PR in a fork we can use?

[mythrilium]

I will ask devops tommorow.

any news on an updated js file? we need it so much

[mythrilium]

Any updates on this? facing a similar requirement where I need to pass data attributes from the parent select list -- am able to work with the build from this PR but would love to see it in the master...

Sorry for asking 1 year later but how do you build this PR to be an usable JS file?

[tjschuck]

@lonesysadmin Instructions for building Chosen from source can be found here: https://github.com/harvesthq/chosen/blob/master/contributing.md#grunt-tasks-running-tests-and-building-chosen

[aamirabbasnaqvi]

Is there any update on this ?