E107: [help] how to use the built in selectize

[nesjett]

Hi, I´m trying to use the selectize library, that there is bundled with e107 v2, to add an user search input.

Im using the form methods to achieve this, but I came across an issue, the form->text() method gets an array to configure the selectize parameters, but when I try to add a parameter that is a jquery function, it pass this as a string, so jquery does not executes this function.

Example:

PHP:

$tt = 'function(query, callback) {
    console.log();      
}';
$jsSettings = array(
    'id'      => vartrue($options['id'], $frm->name2id($name)),
    'options' => $options['selectize'],
    // Multilingual support.
    'load' => $tt,
);

JQUERY guets:
"load":"function(query, callback) {\n\t\t\t\t\t\t\tconsole.log();\t\t\n\t\t\t\t\t\t}"

How can I pass the function in a way that jquery takes it as executable? or how can I fix this in any way?

Thank you,

• Nes

EDIT: I found that there is also a built in user live search in form class, so I managed to achieve my objective using this, but anyway I would like to know about the scenario I wrote before. thx

[CaMer0n]

Mentioning @lonalore who did the work on integrating this.

[lonalore]

Yes, the best choice to achieve it is using "userpicker" method.

Some usage examples:

$form = e107::getForm();

// User-picker field with using "userpicker" method.
$form->userpicker('author', 'author_field_id', 'default_user_name', 'default_user_id');

// User-picker field with using "text" method. (This provides the ability to use custom "loadPath".)
$form->text('author', '', 100, array(
    'selectize' => array(
        'loadPath' => e_BASE . 'user.php',
        'create' => false,
        'maxItems' => 1,
        'mode' => 'multi', // Force to "multi" style.
        'options' => array(
            array(
                'value' => $defaultUserID,
                'label' => $defaultUserName,
            ),
        ),
    ),
));

// Other usage: unlimited tags field.
$form->text('tags', '', 100, array(
    'placeholder' => 'Tags - use hyphens to combine words',
    'selectize' => array(
        'loadPath' => e_SELF,
        'create' => true,
        'valueField' => 'label',
        'plugins' => array(
            'remove_button',
        ),
    ),
));

Furthermore, you can use additional "selectize.js" options. See documentation (General or Data/Searching options)

Using "selectize.js" callbacks are not supported at this time. But if you really want to use them, you can override the "e107.behaviors.selectizeInit" behavior as described in issue #1259.

---

Other help (for "tags" field): I use the following function to explode a string of tags into an array:

/**
 * Explodes a string of tags into an array.
 *
 * @input string $tags
 *  The string to split.
 *
 * @return array $tags
 *  Array contains exploded string parts.
 */
function tagExplodeString($tags)
{
    // This regexp allows the following types of user input:
    // this, "somecompany, llc", "and ""this"" w,o.rks", foo bar
    $regexp = '%(?:^|,\ *)("(?>[^"]*)(?>""[^"]* )*"|(?: [^",]*))%x';
    preg_match_all($regexp, $tags, $matches);
    $typed_tags = array_unique($matches[1]);

    $tags = array();
    foreach($typed_tags as $tag)
    {
        // If a user has escaped a tag (to demonstrate that it is a group,
        // or includes a comma or quote character), we remove the escape
        // formatting so to save the tag into the database as the user intends.
        $tag = trim(str_replace('""', '"', preg_replace('/^"(.*)"$/', '\1', $tag)));
        if($tag != "")
        {
            $tag = str_replace(' ', '-', $tag);
            $tags[] = $tag;
        }
    }

    return $tags;
}

[nesjett]

Thank you so much for your effort on this answer lonalore, you showed me some interesting things, you guys made a great work with this cms, from v0.7 that Im using it, but (I know it´s annoying) you should improve the docs, cause you did a lot of work to make somethink really interesting for developers, but a big part of this awesomeness is hidden.

Keep up the good work!

[Moc]

Keeping this open with the documentation label as a reminder to incorporate this info into the documentation.

[Moc]

@lonalore Question. I'm trying to use the userpicker method as you explained above. As I understand it, I should use the following code to allow setting more items, but I may be mistaken. For some reason the options aren't working (for example maxItems is still set to 1 as show in the source code while I'm trying to set it to 10). Can you help me out? I am probably doing something wrong :D

$userpicker_options = "
array(
    'selectize' => array(
        'create' => false,
        'maxItems' => 10,
        'mode' => 'multi', 
        ),
    ),
";

e107::getForm()->userpicker('author', 'author_field_id', '', '', $userpicker_options)

Also, it would be great if you could update the documentation here: http://e107.org/developer-manual/classes-and-methods#forms
(Login here http://e107.org/developers and a edit button should appear at the bottom of the docs page)

[lonalore]

You should pass options as array (instead of string) to userpicker method. Or if you want to pass options as string, you should use "query string" format for parse_str().

$userpicker_options = array(
    'selectize' => array(
        'create' => false,
        'maxItems' => 10,
        'mode' => 'multi', 
    ),
);

e107::getForm()->userpicker('author', 'author_field_id', '', '', $userpicker_options);

I've tried to update documentation several times but I always got error 500 inside the modal window. :/

[Moc]

@lonalore Meeeh, I spent too much time on it yesterday so my brain refused to see that I was passing the array as a string. It's obvious now. Thanks.

[Moc]

@lonalore I have another question which is also relevant for documentation purposes:

I am using the code above in a shortcode. On SEF friendly pages it doesn't work (probably because it cannot load the source ../../user.php). On the normal page (e.g. /e107_plugins/pluginfolder/filename.php) it works fine.

Is this something I can easily change or does this require a bugfix/enhancement in the core?

[nesjett]

@Moc Im using this for the path:

$defaults['selectize'] = array(
            'loadPath' => e_HTTP . 'user.php',
            'create'   => false,
            'maxItems' => 1,
            'mode'     => 'multi',
            'options'  => $default_options,
            'plugins'  => array('remove_button', 'restore_on_backspace'),
        );

Take not of the "loadPath" option.

PD: This works with SEF urls.

[Moc]

@nesjett Works perfectly, thanks a lot!

[CaMer0n]

Please note that userpicker() still needs additional changes/work, so please be prepared for changes when they occur if using this in custom code.

[Moc]

Closing this in favour of https://github.com/e107inc/e107/issues/1582

[Moc]

Actually keeping this open as there is some additional information available that should be documented as well