Selectize.js: Prepopulate items from database selectize multiselect

Question

I have looked far and wide for examples on how to do this.

I am trying to prepopulate items from a database into a select element using the Selectize jQuery plugin. The idea is that the user has previously selected item(s) and comes to this page to edit or add more items.

From what I can tell, you populate an array using the "items" option. I have had zero success trying to get this to work.

Here is my code:

$('#nsn').selectize({
    persist: false,
    maxItems: null,
    valueField: 'id',
    labelField: 'name',
    searchField: ['nsn', 'part_name', 'id'],
    sortField: [
        {field: 'nsn', direction: 'asc'},
        {field: 'part_name', direction: 'asc'}
    ],
//"items" below should pre-populate select element 
    items: [
        {nsn: '2840-01-461-8833NZ', part_name: 'adfasdfasdf', id:'562'},
        {nsn: '1111-22-333-4444', part_name: 'afafdsdf', id:'902'},
    ],
    options: [
        {nsn: 'NA', part_name: 'F100 Variable Vane', id:'329'},
{nsn: 'N/A', part_name: 'F100 Variable Vane', id:'331'},
{nsn: '6685-01-281-6849AW', part_name: 'Generator Oil Temperature   Indicator', id:'672'},
{nsn: '6680-01-350-8049RK', part_name: 'Fuel Quantity Indicator', id:'391'},
{nsn: '6680-01-350-8048RK', part_name: 'Indicator, Liquid Quantity', id:'367'},
{nsn: '6680-01-224-7271RK', part_name: 'Fuel Quantity Indicator', id:'390'},
{nsn: '6680-00-220-4090RK', part_name: 'Fuel Quantity Indicator', id:'389'}
],
    render: {
        item: function (item, escape) {
            var name = formatName(item);
            return '<div>' +
            (item.nsn ? '<span class="name">' + escape(item.nsn) + '</span>, ' : '') +
            (item.part_name ? '<span class="email">' +    escape(item.part_name) + '</span>' : '') +
            '</div>';
        },
        option: function (item, escape) {
            var name = formatName(item);
            var label = name || item.nsn;
            var caption = name ? item.nsn : null;
            return '<div>' +
            '<span class="label">' + escape(label) + '</span>' +
            (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
            '</div>';
        }
    },
    create:false
});

So based on the array in items, two items should appear already selected in the multiselect. Everything else works perfectly. Any help is appreciated.

score 0 · Accepted Answer · edited Apr 06 '15 at 04:57

0

You can use addItem(value, silent) to select the items.

edited Apr 06 '15 at 04:57

CMPS

7,733
4
28
53

answered Apr 06 '15 at 04:54

Tan Zhe Meng

106
1
5

https://stackoverflow.com/questions/20310664/selectize-js-manually-add-some-items – Thomas Valadez Aug 01 '17 at 23:19

score 0 · Answer 2 · answered Aug 01 '17 at 23:28

Check out this How to add item into selectize js automatically after document ready?

I am using the standalone library. Other accepted answers didn't work for me.

$(document).ready(function(){
   var selectize_element = $("#select-links")[0].selectize;
   selectize_element.addOption({
      text:'First Item',
      value: 'First Item'
   });
   selectize_element.refreshOptions() ;
   selectize_element.addItem('First Item');
});

Selectize.js: Prepopulate items from database selectize multiselect

2 Answers2