How to set init value and label

[frthjf]

I use value declaration to initialize selectize:

<input type="text" value="awesome,neat">

But I don't know how to declare values with a different label, something like:

<input type="text" value="[{value:12,label:awesome},{value:137,label:neat}]">

so that selectize will show up with "awesome" and "neat" by post "12" and "137" on submit.

[jsderman]

any luck on this one?
we are having difficulty with

control.setValue(userlist);

where userlist is an array of integers which need to be pre populated with the remove_button plugin

[RyanThompson]

It would be great to get some insight on this - every time I try repopulating values, the furthest I get is ID => undefined

[jsderman]

After stepping into the code a bit, It appears as if both setValue and addItem are calling the same functions.
After debouncing events (whatever that does?)
The system on line 2256 runs

' if (!self.options.hasOwnProperty(value)) return; '

This is populated on the demo, however is not populated otherwise... I wonder if this is an issue regarding a callback not being specified for addItem(in which case you could just refresh from the source at that time).

I'm hoping that an id just simply isn't tied properly somewhere in the code as all this data should be preloaded properly when the select is created via the preload option?

Please advise

-Justin

[jsderman]

any luck ryan?

[RyanThompson]

The furthest I get is value => undefined..

It would be great if the author could dip in on this - seems like a pretty necessary feature. Shouldn't take terribly long to reply to an issue email.

In the meanwhile - Ill take another stab at this tonight..

[jsderman]

Likewise,

I'm sure we're both missing something. I will try to create a js fiddle example this evening and tomorrow.

-Justin

Sent from my iPhone

On Nov 5, 2013, at 7:03 PM, Ryan Thompson notifications@github.com wrote:

The furthest I get is value => undefined..

It would be great if the author could dip in on this - seems like a pretty necessary feature. Shouldn't take terribly long to reply to an issue email.

In the meanwhile - Ill take another stab at this tonight..

—
Reply to this email directly or view it on GitHub.

[RyanThompson]

OK.. So far, I have been able to do this - but here's how it works (has to work as far as I know). You need to set the options: param with any values you will be setting as a JSON set. Then use setValue(value) - making sure the label field and value field are available in the options.. This is a special use by my system but you can see how it works:

 <script type="text/javascript">

$(document).ready(function() {

    var selectize = $('#<?php echo $form_slug; ?>');

    selectize = selectize.selectize({
        maxItems: 1,
        valueField: '<?php echo $value_field; ?>',
        labelField: '<?php echo $label_field; ?>',
        searchField: '<?php echo $search_field; ?>',

                    // 
                    // Gotta have values here in ready format
                    // 
        options: [{"id":"1","account_name":"AI Web Systems, Inc."}],
        create: false,
        render: {
            /*item: function(item, escape) {
                return '<div>' +
                    (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
                    (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
                '</div>';
            },*/
            option: function(item, escape) {
                return '<div>' + item.<?php echo $label_field; ?> + '</div>';
            }
        },
        load: function(query, callback) {
            if (!query.length) return callback();

            $('#<?php echo $form_slug; ?>').parent('div').find('.selectize-control').addClass('loading');

            $.ajax({
                url: SITE_URL + 'streams_core/public_ajax/field/relationship/search/<?php echo $stream_namespace; ?>/<?php echo $stream_param; ?>/<?php echo $field_slug; ?>?query=' + encodeURIComponent(query),
                type: 'GET',
                error: function() {
                    callback();
                },
                success: function(results) {
                    callback(results.entries);
                }
            });
        }
    });

            // 
            // Set the value here according to your value field
            // 
    selectize[0].selectize.setValue(1);

    // Add our loader
    $('#<?php echo $form_slug; ?>').parent('div').find('.selectize-control').append('<?php echo Asset::img('loaders/808080.png', null, array('class' => 'animated spin spinner')); ?>');
});

</script>

[RyanThompson]

Ignore the other details of course ^_^

[Hezion]

Ideally, the data populated by load() should be available to the render() function. This is currently not the case, am i correct?

[artiaggarwal]

yes i think so too , only the data in options : is available and not the data in load :( . the values are rendered properly (label/value) only if the data is in options .

[om3]

How to was fixed this issue?

[frthjf]

What did the trick for me:

1. PHP data generation

$custom = '';
$glue = '';
$value = '';
foreach($this->value as $entry) {
      $custom .= $glue . '{"item_id":"' . $entry["item_id"] . '", "title":"' . $entry["title"] . '"}';
      $value .= $glue . $entry["linked_id"];
      $glue = ',';
}

$custom = "options: [" . $custom . "],";

$html = '<input type="text" id="selectize" name="demo" value="'.$value.'">';

1. Using $custom in JS:

jQuery('#selectize').selectize({
        {$custom}
        delimiter: ',',
        persist: false,
        hideSelected: true,
        load: function(query, callback) {
            data = jQuery('#selectize').data('data'); //only one tag input on the page
            callback(data);
            if (!query.length) return callback();
            jQuery.ajax({
                url: '...',
                type: 'GET',
                dataType: 'json',
                data: {
                    key: query
                },
                error: function() {
                    callback();
                },
                success: function(result) {
                    callback(result);
                }
            });
        }
});

I hope I did not omit something necessary, feel free to improve the example.

[Hezion]

This is what i did:

 getDataSelectize = function () {
        var data;

        $.ajax({
            url: "xxx",
            async: false,
            success: function (res) {
                data = res;
            }
        });
        return data;
    };

$('.xxx').selectize({
        ...
        options: getDataSelectize()
        ...
    });

However this is not recommended since you block (note the async: false) the browser.