Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add functionality to allow templates #692

Open
wants to merge 5 commits into from

32 participants

Cody Stewart Brennan McEachran John Ledbetter Blake Hilscher Christophe Coevoet Brian Feister Kevlys Koen Punt Brookes Stephens carlos Chris Christensen Epexa Thomas gitlost Roel van Duijnhoven twisk shahramsh Nuno Silva oachkatzl Serhey Tiago Ferreira Lima Ray Holland Rafael Felix santanaf and others
Cody Stewart

I've added the functionality to allow templates in dropdowns by using the data attribute on options and a template option when setting up chosen.

I've compiled the code and provided jquery and prototype examples.

Below is the jQuery example.

DOM:

<select data-placeholder="Choose your favorite candy..." class="chzn-select-template-example" style="width:350px;" tabindex="11">
  <option value=""></option>
  <option data-type="chocolate" data-user-rating="1.8">M&Ms</option>
  <option data-type="fruity" data-user-rating="1">Starburst</option>
  <option data-type="fruity" data-user-rating="7">Skittles</option>
  <option data-type="chocolate" data-user-rating="9">Reese's</option>
  <option data-type="chocolate" data-user-rating="10">Snickers</option>
</select>

Initialize It:

$(".chzn-select-template-example").chosen({
  template: function (text, templateData) {
    return [
      "<span style='float: right'>User Rating: " + templateData.userRating + "</span>",
      "<div>" + text + "</div>",
      "<div><i>type of candy: " + templateData.type + "</i></div>"         
    ].join("");
  }
});

Result:

image

Thanks to Elliott Wood for code reviewing and to Select2 for inspiration.

Brennan McEachran

Would love this.

John Ledbetter

This would definitely be much nicer than my current solution of hacking the data I need into Chosen.

Blake Hilscher

I would love to see this added to Chosen - great feature, and far better than hacking.

Christophe Coevoet
Collaborator

:+1:

Kevlys

:thumbsup: +1

Koen Punt
Collaborator

This and functionality for adding custom options are pretty neat but not supported when chosen is not loaded (e.g. plain <select>). And I think that's a reason for the holdback of merging this kind of functionality.
But of course only @pfiller's knows what the real reasons are :)

Cody Stewart

@koenpunt Thanks! If chosens not loaded the attributes on the options are still valid and usable by jQuery.

Koen Punt
Collaborator

@cjstewart88 What I mean is that when JavaScript is disabled, the extra functionality is not available, so users are missing out. And therefore it may be better to keep this 'addons' in their own branches/repositories.

Brian Feister
Cody Stewart

@koenpunt hmm, but if JavaScript is disabled the entire chosen plugin doesn't work, not sure I'm following why it shouldn't be included in the library.

Brookes Stephens

+1 users disabling javascript should be used to a large scale lack of functionality. I'd love this in my projects also. @brianfeister make that a spinning dinosaur in that animated gif and you've got a deal!

Koen Punt
Collaborator

@cjstewart88 True, the plugin doesn't work, but as Chosen is a selectbox enhancer and not an extender, this doesn't take away any of the functionality, only the experience.

Koen Punt koenpunt referenced this pull request
Closed

Image option #831

carlos

I'm sorry, but i can't use this functionality. i copy the same code of @cjstewart88 but, for me no show the style, in firebug any error show, and i don't know what can i do.

so, what can i do?

Chris Christensen

I noticed it was mentioned select2 was inspiration; but, this really nice functionality to have in the core library that really makes use of complex select options very easy. Thanks!

Epexa

The guys in the 0.9.10 version that runs this method? Or to prescribe what that CSS style?

Thomas

I´ve updated cjstewart88´s solution:
1. The templates are used for displaying not only in the dropdown, but also for selected values and the default values (basically everyhere a option is displayed)
2. The Template gets handed the text and the value of an option
3. Updated to work with the latest Version

#964

Patrick Filler pfiller referenced this pull request
Closed

Template support #964

Cody Stewart

Any update on this @pfiller?

Patrick Filler pfiller referenced this pull request
Closed

Adding custom html cells. #1199

gitlost

+1 (Plus I think it should also use @thomasf1's suggestions above)

Cody Stewart

Any chance on this getting merged in @pfiller, @kenearley and @stof?

twisk

+1

Nuno Silva

Merge this in already! :(

oachkatzl

Short question about those templates:
Is it possible to get those data Values into the selected field? So not only inside the drop-down but also when I selected one that it will show the data?

T.J. Schuck tjschuck referenced this pull request
Closed

Custom html #1659

Serhey

Is any progress?

Tiago Ferreira Lima

@oachkatzl +1 to the last comment

Is there any date when it will be merged?

Serhey

Wanna know too!!!!

Ray Holland

how has this gone ignored for 2 YEARS. BUMP!!

This was referenced
Rafael Felix

:+1:

BUMP

santanaf

Such a useful addition, sad it's been left hanging for so long even with so many people consistently requesting it. Please merge this.

Ray Holland

Today I was converted, I will no longer use chosen.js, we are deprecating it, switching to Select2, it supports this templating as well as searchable keywords.

Serhey

Select2 is too heavy.

Mike Quattrin

This is brilliant! +1

Zelimir Fedoran

This would really help us out. +1

Yulia

+1 to this. Can't believe that the work is done and it's not being merged in. Really sad to see - we'll steer away from using chosen in the future.

Adrien be

As much as I like using chosen.js I am now slowly switching to using Select2.js

T.J. Schuck tjschuck referenced this pull request
Closed

Allow images in select #2055

Petar Tahchiev

+1 on this.

Yuval Bar-On

awesome

Petar Tahchiev

Hi guys,

I need to use jquery-chosen library in my project, but I can't because of this issue.

I could, however, use this project instead:

http://websemantics.github.io/Image-Select/

I just want to know if there's any plans to fix this in the recent future, or I should use the other project.

This is really important for me, because later on the migration might be really hard to do. Just some rough idea when can we expect to have this fixed.

Thanks a lot.

Yuval Bar-On

@paranoiabla or you can just use chosen and apply this patch to allow custom templating

Petar Tahchiev

@yuvii I can't really because I'm using webjars, so It has to be a webjar project. I really can't believe that an issue with a pull-request attached to it still open after 2.5 years... that's just embarassing..

Yuval Bar-On

@paranoiabla first of all - chosen hasn't been updated at all for a couple of years now. It's their decision to make. If you want, there's select2 which is a fork that is still in developement.

Secondly - I'm not familiar with webjars, but doesn't it let you add your own custom javascript files?

T.J. Schuck
Owner

@yuvii

chosen hasn't been updated at all for a couple of years now.

This is empirically false, and disrespectful to the many people who have contributed to Chosen voluntarily and in their spare time.

Open source is people. Be nice.

Yuval Bar-On

@tjschuck Sorry, I wasn't trying to offend anyone. I think chosen is amazing. It's a fantastic piece of work, and I have used it myself for a few projects, including expanding a few parts of it (so I've seen and edited the source code, and I know how good it is). I really admire what you guys did here, and always preferred chosen over similar libraries that are overly-complex and feature heavy (such as select2)

It's just that in the last few years I haven't noticed any major updates or new features to the library. Perhaps I haven't noticed them, or it was only for a small period of time. Anyway, all I meant was that he shouldn't be mad that you guys don't add new features like this, because you might be focusing on other projects, and that he should just resolve the issue himself. Again, sorry for my phrasing, I can be terrible at it

Petar Tahchiev

I guess the biggest problem is the silence about this issue. It seems to be pretty major, but when I ask if there's any plans to fix it in the near future, then all I get is silence. A simple yes or no would be sufficient. Without an answer I am unable to make a decision if I should use chosen at all.

T.J. Schuck
Owner

@yuvii :thumbsup: :heart:

@paranoiabla You describe this as a "major issue" that needs "fixing", but it's not that at all -- it's a feature addition, not a bug fix.

There are many reasons a feature might not be immediately merged. But the most likely reason is just that this is a complicated addition with a big diff that will require full code review, QA, documentation, and future maintenance, and someone just hasn't had the free time to do all of those things quite yet.

If you want to use this feature as is, dowload the source, apply the patch, and use it. Just as we've made the master branch of Chosen open source, this contributor has made his code just as freely available for you to use.

Petar Tahchiev

@tjschuck My question is still unanswered, so I will just assume that it's too complicated to merge a pull request for 2 and a half years so it will not be done in the near future :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 28, 2013
  1. Cody Stewart
  2. Cody Stewart

    Remove nulls when calling .template() function and changed .text() ba…

    cjstewart88 authored
    …ck to .html() to prevent breaking previous functionality.
  3. Cody Stewart
  4. Cody Stewart

    Changed order of params for the template function and camel cased tem…

    cjstewart88 authored
    …plate data keys to be more normal javascript standard.
  5. Cody Stewart

    Camel case the returned templateData in the examples, use @ to invoke…

    cjstewart88 authored
    … a method on this, and use .html instead of .text to stick to previous convention.
Something went wrong with that request. Please try again.