Include static options when using remote source

[jbrooksuk]

Include static options when using remote source

[brianreavis]

Options shouldn't be overwritten unless one coming in has an identical value as an existing option (i.e. defined by the valueField option). It's important to overwrite to prevent duplicates and erratic behavior.

[jbrooksuk]

Mine are - I have a select with some default options within the HTML. I then override load and my options have now gone missing. The value field (which should be the value attribute from the option) is definitely different to others.

I'll write up a quick demo of it tomorrow.

[jbrooksuk]

@brianreavis Sorry it's taken a few days, it was my birthday the weekend just gone, so I've been a little busy. Here we go.

My select element is setup statically to contain a couple of default options:

select(type='text', placeholder='Enter a hotel name', tabindex=9, name='hotel')
    option(data-value="")
    option(data-value="00") 01
    option(data-value="01") 03
    option(data-value="08") 05
    option(data-value="02") 07
    option(data-value="03") 09
    option(data-value="04") 11
    option(data-value="05") 13
    option(data-value="06") 15
    option(data-value="07") 17

Then I'm using Selectize to load in more options afterwards:

$quoteForm.find('select[name=hotel]').selectize({
    diacritics:   false,
    create:       true,
    hideSelected: true,
    labelField:   'name',
    valueField:   'name',
    searchField:  ['name', 'id'],
    preload:      true,
    maxItems:     1,
    render:       {
        item: function(data) {
            return "<div data-value='"+data.value+"' data-hotelid='"+data.id+"' class='item'>"+data.name+"</div>";
        },
        option: function(data) {
            return '<div data-value="'+data.name+'">' +
                    '<img src="http://2cw.co.uk/img/'+data.country+'/'+data.id+'" alt="" class="thumb">' + 
                        '<span class="hotel_name">' +
                            '<span class="name">' + data.name + '</span>' +
                        '</span>' +
                    '</div>';
        }
    },
    load: function(query, callback) {
        if(!query.length) return callback();

        var destinationISO = $('input[name=iso]').val();
        if(query == "SELECTIZE") query = ""; // Mini fix

        $.ajax({
            async: false,
            cache: false,
            url: '/api/hotels/' + destinationISO || "",
            dataType: 'json',
            data: {
                q: query
            },
            success: function(data) {
                callback(data);
            }
        });
    },
    // Set the hidden ISO input
    onItemAdd: function(value, $item) {
        var itemData = $item.data();
        $('input[name=hotel_id]').val(itemData.hotelid);
    }
});

Nothing out of the ordinary, and yet my default options are removed.

[brianreavis]

When reading <option> elements from the HTML, it reads the value from the value attribute, not data-value.

    option(value="")
    option(value="00") 01
    option(value="01") 03
    option(value="08") 05
    option(value="02") 07
    option(value="03") 09
    option(value="04") 11
    option(value="05") 13
    option(value="06") 15
    option(value="07") 17

Mind giving that a shot?

[jbrooksuk]

Okay, now it's coming through as undefined, but that'll be down to me using different field names in the initialization of Selectize. This is similar to the problem I face in #27 I think?

[brianreavis]

A few things:

• If you're using rich data, you need to make sure to bootstrap all options with their data. You should choose one of the following:
  • Declare the options in JS in the selectize settings instead of HTML.
  • Attach JSON data as an attribute on each <option>. By default, the library will try to read the "data-data" attribute. If you'd rather use another, specify the attribute name with the dataAttr setting.

option(value="..." data-data="{...}") label

• When rendering options and items, there's no need to manually add the "data-value" attribute. This will be added by the library. Providing your own could lead to erratic behavior. Furthermore, in your sample data.name is used in one place, and data.value is used in another.

[jbrooksuk]

Brilliant! I shall give these a go - thanks Brian!

[jbrooksuk]

Worked a treat! Thanks Brian!