Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/brianreavis/selectize.js/issues/366 below:

How to load default (selected) values from database · Issue #366 · selectize/selectize.js · GitHub

Hi,

I read issue #77 but I still doesn't understand how to initialize my selectize select with selected values from database.

JS

$( document ).ready(function() {
    $('#shop_brands').selectize({
        plugins: ['remove_button'],
        delimiter: ',',
        persist: false,
        preload: true,
        openOnFocus: true,
        valueField: 'id',
        labelField: 'title',
        searchField: ['title'],
        maxOptions: 10,
        options: [],
        create: false,
        render: {
            option: function(item, escape) {
                return '<div>' +escape(item.title)+'</div>';
            }
        },
        load: function(query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: '/admin/brands/search',
                type: 'GET',
                dataType: 'json',
                data: {
                    q: query
                },
                error: function() {
                    callback();
                },
                success: function(res) {
                    callback(res.data);
                }
            });
        }
    });
});

HTML :

<div class="form-group">
                    <div class="col-md-12">

                        <label class="control-label" for="shop_brands">{{{ Lang::get('admin/shops/table.brands') }}}</label>
                        <select class="form-control" name="brands[]" id="shop_brands" multiple>
                           <?php 
                                if($mode=='edit'){
                                    foreach ($shop->brands as $brand) {
                                        $tojson=array('id'=>$brand->id,'title'=>$brand->title);
                                        echo '<option value="' . htmlentities($brand->id) . '" data-data="' . htmlentities(json_encode($tojson)) . '">' . htmlentities($brand->title) . '</option>';
                                    }
                                }
                            ?>
                        </select>
                    </div>
                </div>

When I look the generated HTML I found this, it seems correct :

                <div class="form-group">
                    <div class="col-md-12">

                        <label class="control-label" for="shop_brands">Brands</label>
                        <select class="form-control" name="brands[]" id="shop_brands" multiple>
                           <option value="1" data-data="{&quot;id&quot;:1,&quot;title&quot;:&quot;Le temps des cerises&quot;}">Le temps des cerises</option>
                               <option value="6" data-data="{&quot;id&quot;:6,&quot;title&quot;:&quot;Scarlett Ross&quot;}">Scarlett Ross</option>                      </select>
                    </div>
                </div>

But when I load the page in the browser, these 2 values aren't shown in the selectize field...

The load function works well, because when I start typing something in the field, it shows me results.

Where am I wrong ? Thanks for your help.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4