Can not populate bootstrap select with data live search + multiple with jquery

Question

I want to populate the following select statement with options gotten from a php code

<select name='friends[]' id='friends' class='selectpicker show-tick form-control'
        data-live- search='true' multiple>
    <!-- options here -->
</select>

my jQuery code

$.ajax({
    url:'get_togethers.php', //this returns object data
    data:'user_id='+user_id,
    type:'POST',
    datatype:'json',
    success:function(data) { //data = {"0":{"id":1,"name":"Jason"},"1":{"id":2,"name":"Will"},"length":2 }
        data = JSON.parse(data);
        var options;
        for (var i = 0; i < data['length']; i++) {
            options += "<option value='"+data[i]['id']+"'>"+data[i]['name']+"</option>";
        }
        $("#friends").append(options);
    }
});

Static values inside the select tag show up, but the values added from the ajax function don't. EDIT : If I remove the bootstrap from this, the values show up, but with bootstrap on, they don't show up.

Answer 1

$('#friends').selectpicker('refresh');

Is necessary to update the newly added values, which I had missed.