Module InputfieldChosenSelect

[LostKobrakai]

InputfieldChosenSelect

This topic (https://processwire.com/talk/topic/71-categorizingtagging-content/) showed the need for a Inputfield that would provide a real tagging UI to be useable with FieldtypePage. It uses the chosen library, which can be found here http://harvesthq.github.io/chosen/. It's meant for MultiPageFields and works kinda like asmSelect, but with a different skin.

Features:

• Inline adding of new tags, which will then generate the corresponding pages.
• Sortable tags.

Usage

• Install the Module
• Edit your pagefield and choose InputfieldChosenSelect as inputfield.
• Use Enter or Tab to create new Pages with the currently typed name.
• Enter will fill in the tab currently selected in the dropdown.

http://modules.processwire.com/modules/inputfield-chosen-select/

https://github.com/LostKobrakai/InputfieldChosenSelect

Edited April 20, 2015 by LostKobrakai
Removed "approval pending"

[kongondo]

Is there a way to make readme-images, which come from github, work in the module directory?

Like this: <img src='https://github.com/LostKobrakai/InputfieldChosenSelect/raw/master/screen.png' /> in your README

Since this will be the modules support forum, please add instructions here on how to install and use it. Also add in your README, thanks.

Edited January 30, 2015 by kongondo

[LostKobrakai]

I've added usage instructions, but the potential stumbling block of first adding the module in the settings of InputfieldPage is now included in the modules installation. So there's really not much left.

[adrian]

@LostKobrakai - just playing with this now and I like it - thanks, but there is a bug

In InputfieldChosenSelect.js you have:

$(".InputfieldPageTags select[multiple=multiple]").each(function() {

I am not actually sure how that would ever work since that approach would need the name of the field, eg if your field name is: tags

$(".Inputfield_tags select[multiple=multiple]").each(function() {

but this also works and won't be dependent on the field's name:

$(".InputfieldChosenSelect select[multiple=multiple]").each(function() {

[kongondo]

Features on the "maybe" list:

• Inline adding of new pages.

This is in-built in ProcessWire and it already works with your Inputfield. I have tested and it works fine unless I am missing something?

A request: Do you know if it is possible to sort the tags by drag and drop like in asmSelect? In your case this would have to be horizontal, of course..

[LostKobrakai]

@adrian

Shoot, renamed the module locally from InputfieldPageTags to InputfieldChosenSelect, that's why it was still there Fixed it.

@kongondo

With inline I mean really in the field where the tags are, so that new pages are also shown in a tag ui if you hit tab or enter. Currently you can only use the autocomplete in this field and add pages below. 

[kongondo]

I see, but adding pages below has the advantage of being able to add multiple pages in one swoop. I wouldn't want to reinvent the wheel myself, but of course, it's your decision

I edited my post above: Did you see my request? 

Edited January 30, 2015 by kongondo

[adrian]

No offense kongondo, but I would actually really like to see the inline way of adding new tags/pages - Since they are already typing, I think that is what many users would expect to be able to do, rather than needing an additional field. 

Nico's https://github.com/NicoKnoll/TextboxList works like this, but of course it would be great to have this in this module so everything is connected to the page field.

[LostKobrakai]

I wouldn't reinvent much, I would just add the ability to add new tags and in the background, as this works kinda like asmSelect, it would just add items to a select input. To the request of sorting these. It's not possible out of the box, as the library is meant to be a progressive enhancement for selectboxes, where you're normally not able to sort stuff. I'll see if this would be addable with a little jQueryUI's sortable.

[kongondo]

OK, I see and agree with your point guys...

[Martijn Geerts]

Sortable is not that difficult I guess. Raymond has explained it over here.

[LostKobrakai]

Yeah I found a few github repos with that feature added, too. Updated all those snippets to work with the new version of chosen and here we go. Inline adding and sorting is now working.

[adrian]

Love the enhancements, but I am getting something weird - if I only enter 2 characters and then hit enter, it creates a new tag for to match those 2 characters, and then randomly adds a second tag to the list.

Then hit enter and I get this:

 

Edited January 30, 2015 by adrian
Fixed incorrect attachments

[LostKobrakai]

Yeah the code to to distinguish between "still options available" and "definitely a new page" is not working perfectly. For now I've updated it to just use TAB to create a new one and ENTER for choosing from the dropdown.

[SiNNuT]

Nice stuff.

A question though. If i remember correctly Chosen loads the entire dataset into the DOM. I'm wondering if this could potentially lead to performance issues when working with a lot (thousands) of pages to choose from. Solutions like select2 or selectize.js (both jQuery based) allow for partial loading of remote datasets in some form. Maybe you chose Chosen for a good reason but i was just wondering.

[Peter Knight]

>> Inline adding of new tabs, which will then generate the corresponding pages.

Should be "new tags" ?

[LostKobrakai]

If i remember correctly Chosen loads the entire dataset into the DOM. 

I don't know about all the other inputfields, but chosen is based on the exact multi select inputfield, which asmSelect is built on. I don't know about the performance of the library itself, but the base DOM containes all elements for both inputfields.

[pwFoo]

Nice module. I'll try it soon

I build an inline edit module with Tokeninput with free tagging and ajax data source, but I build it for frontend use and not a Inputfield.

[kongondo]

Btw, seems the inline creation of new tags changes the tag's title case to lower case (must be the js). Since this are used to create page titles, is it possible to change this behaviour? i.e. If I enter the tag 'Tech', I expect that and not 'tech'. 

[LostKobrakai]

Yeah, was to eager to do the comparison of available tags and new tags in lowercase. Should have been only in the if statement and not for the whole value. I've uploaded a fixed version, so it should work now.

[adrian]

Just a quick request - can you make it possible to override these:

    AbstractChosen.default_multiple_text = "Select/Enter tags";
    AbstractChosen.default_single_text = "Select an Option";
    AbstractChosen.default_no_result_text = "No results match";

Thanks again for this - it's coming in very handy, although client feedback unfortunately is saying that the "Tab" to create a new tag is confusing - any chance you can revisit making Enter work in all situations? Sorry for sounding demanding

[LostKobrakai]

From the api you can just use these as with all options available: https://harvesthq.github.io/chosen/options.html.

$inputfield->setChosenOption('no_results_text', "Text");
$inputfield->setChosenOption('placeholder_text_multiple', "Text");
$inputfield->setChosenOption('placeholder_text_single', "Text");

I don't know if that's enough for you to hook ::render and inject these. 

Regarding the Tab / Enter situation. I'm quite good in js by now, but the sourcecode of chosen is still somewhat complex. The last time I searched I didn't find a way to check if there are still elements left in the dropdown or not. I'll take another look into it tomorrow.

[LostKobrakai]

I've updated the module to give users the ability add pages with Enter as well. Let me know if there are any problems. 

Edit: I've also added some more fitting styles for AdminThemeReno.

[adrian]

Awesome - so much better with Enter working to add tags - thank you!

As for the no results/placeholder text - I might just go with some jquery.

Thanks again for a fantastic job on this - it really is the best solution for tags fields!

[adrian]

Just had one more thought for you - how hard do you think it would be to also offer this as an inputfield for Ryan's new Options fieldtype, in addition to the Pages fieldtype that is currently uses. Thought it might be nice because with tags it is often unlikely that you actually need these to be accessible via a URL, hence no real need for having them as pages now that we have this new fieldtype. 

Just thinking out loud if you are looking for something to do