Multiselect with autosuggest Values

kingmaoam · August 2015

Hi,
in the project I am currently migrating to Fuel I have a form field as textarea, where I can input values as autosuggest values. I would like to migrate this also to Fuel.

Currently I hand over a list of autosuggest values to the create/edit CI-view and in the view I have a JS snippet to build the autosuggest list and handle the correct appending to the textarea.

Is there a possibilty to use a similar feature in Fuel? Another idea would be to use a has_many relationship, but then I need a multiselect field with a search box like in the select2 type, because the autosuggest list is very big.

admin · August 2015

Are you needing a field type similar to this plugin?
https://github.com/xoxco/jQuery-Tags-Input

kingmaoam · August 2015

Yeah exactly

admin · August 2015

That sounds like a prime candidate for creating a custom field type. There are a couple blog posts about that:
http://docs.getfuelcms.com/general/forms#association_parameters
http://www.getfuelcms.com/blog/2013/12/17/creating-a-color-picker-custom-field
http://www.getfuelcms.com/blog/2014/06/04/integrating-with-dropbox

If you want the data to be transformed from a comma delimited value to something else, you can implement a on_before_save model hook:
http://docs.getfuelcms.com/general/models#hooks

Let me know if this helps and report back since I've been thinking about adding a tags fuel type for a while (select2 sort of filled my need though).

kingmaoam · August 2015

Hi,

in the first approach (I just migrate my old solution, in a next step I will perhaps migrate this one to the jquery tags input) I have following code:


<?php
    class MY_custom_fields {
        
        function tagsinput($params) {
            
            $form_builder =& $params['instance'];

            // normalize value to not have the #
            if (!empty($params['value']))
            {
                $params['value'] = trim($params['value'], '#');
            }
            
            $js = '<script type="text/javascript">
                    $(function() {   
                        var availableTags = new Array();';
            foreach($params["autosuggests"] as $key => $wert) : 
                $js.= "\navailableTags[".$key."] = '".$wert->value."';\n";
            endforeach; 
            
            $js.= 'function split( val ) {
			         return val.split( /,\s*/ );
		           }
		           function extractLast( term ) {
			         return split( term ).pop();
		           }

                   $( "#weitere_kraefte" ).bind( "keydown", function( event ) {
				        if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) {
					       event.preventDefault();
				        }
                   })
			       .autocomplete({
				        minLength: 0,                
                        position: { my : "left top", at: "right top" },
				        source: function( request, response ) {
			            response( $.ui.autocomplete.filter(	availableTags, extractLast( request.term ) ) );
				        },
    				    focus: function() {	return false; },
    				    select: function( event, ui ) {
        					var terms = split( this.value );
        					terms.pop();
        					terms.push( ui.item.value );
        					terms.push( "" );
        					this.value = terms.join( ", " );
        					return false;
				        }
			         });     
                    });
                  </script>';

            $form_builder->add_js($js);
            $params['type'] = 'textarea';
            return $form_builder->create_text($params);

        }
    }
?>

In principal the field is working but although I passed $params["type"] = "textarea" the field is displayed as normal text input and not as textarea. Do you know why?

admin · August 2015

use return $form_builder->create_textarea($params);

Howdy, Stranger!

Categories

Multiselect with autosuggest Values

Comments