Selectize.js: Set selected values in initialization

[andriijas]

Using the Email Contacts example here: http://brianreavis.github.io/selectize.js/#tabs

var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
                  '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';

$('#select-to').selectize({
    persist: false,
    maxItems: null,
    valueField: 'email',
    labelField: 'name',
    searchField: ['name', 'email'],
    options: [
        {email: '[email protected]', name: 'Brian Reavis'},
        {email: '[email protected]', name: 'Nikola Tesla'},
        {email: '[email protected]'}
    ],
    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) {
            var label = item.name || item.email;
            var caption = item.name ? item.email : null;
            return '<div>' +
                '<span class="label">' + escape(label) + '</span>' +
                (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
            '</div>';
        }
    },
    create: function(input) {
        if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
            return {email: input};
        }
        var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
        if (match) {
            return {
                email : match[2],
                name  : $.trim(match[1])
            };
        }
        alert('Invalid email address.');
        return false;
    }
});

Is there anyway way to pass in whats going to be the selected value? I can set it afterwards but that would trigger the onChange event which is not what I want.

[brianreavis]

Hmm, I'm not totally following. What do you mean by "pass in what's going to be the selected value"? And at what point is that going to happen?

[andriijas]

rather than doing selectize.setValue(5) after initialization id like to pass in 5 to the initialization above

[netaisllc]

Brian, I think the impetus for the question is this:

How to set the selected item in advance of the Selectized object's initialization. In other words, how to set - through configuration - the equivalent of I'm selected.

This is actually my questions, and if it's already covered somewhere I sure couldn't find it. :)

[andriijas]

Thanks for explaining for me @netaisllc

[dsharer]

Is this currently not an option to initialize the value through a config setting?

[andriijas]

Nope

On Friday, May 23, 2014, David Sharer [email protected] wrote:

Is this currently not an option to initialize the value through a config
setting?

—
Reply to this email directly or view it on GitHubhttps://github.com/brianreavis/selectize.js/issues/277#issuecomment-43958869
.

[dsharer]

If I submit a pull request do I have to make changes to both standalone and regular selectize.is?

[nlwillia]

You're looking at the dist folder. The file you want to change is src/selectize.js. The build process will then produce the files in dist for you (but you should exclude those generated files from your commit/PR). See the notes at the bottom of the front page for more on building/contributing.

[NotSqrt]

:+1:

I regularly use $element.selectize({options: [{"value": yy, "text": "label"}]});, then call selectize.setValue(id)
and would be very happy with something like:

{
    options: [
         {value: id, text: "label", selected: true},
         {value: id, text: "label", selected: true},
         {value: id, text: "label", selected: false},
    ],
    selectedField: "selected"
}

[thbar]

It would indeed make sense (speaking as a newcomer!) - took me a bit of time to figure out how to achieve this.

[garygreen]

+1, just run into this. I was trying to do like @NotSqrt with passing selected: true with the options but did nothing.

[ksnyde]

I think this is an important addition and I'd really like to see an example of it near the top of the documentation. It is a use-case almost everyone will need.

[NotSqrt]

@brianreavis Do you have some time to look into this ?

[joshuataylor]

setValue also triggers a change of input which will trigger a bind event, however setTextboxValue for an input doesn't.

[felonious]

Easy...

$('#p_cliente_id').selectize({
items: [5], //------------>>> place between the id keys that you need to initialize the select.
create: true,
maxOptions: 10000
});

[NotSqrt]

5ece5f5d86ab617f finally documented that, 15 days ago.

[sujeshkumaruv]

Any positive news. Stuck with the same problem. I have a multi select html . The options are shown first . Then I use ajax to change the options in html multi select but the selectize does not update?
Any suggestions on how to update selectize?

[nlwillia]

@sujeshkumaruv What you're probably looking for (which isn't really on topic for this issue) is the refreshOptions() API method. $('#id').data('selectize').refreshOptions()

[czmole]

I can not make the items[] to work. I am trying like this http://laravel.io/bin/GyXQV
The id 11 is in the list that will be loaded, what am I doing wrong?
I am trying to populate the selectize input with some values when editing a record...
Thank you!

[richardenglish]

oh, it's working. cool.

quick example (pre-select items one and three):

the items array:
var theselected = ['one','three'];

the selectize:
var $select2 = $('#select-tools2').selectize({
maxItems: 12,
preload: true,
items: theselected,
openOnFocus: 'true',
valueField: 'id',
labelField: 'title',
searchField: 'title',
options: [
{id: 'one', title: 'Section One'},
{id: 'two', title: 'Section Two'},
{id: 'three', title: 'Section Three'},

etc.

[JoabMendes]

Thanks @felonious !! That was the easiest solution I found! Using setValue and other stuff didn't work for me!