title: Can not populate bootstrap select with data live search + multiple with jquery
body: <p>I want to populate the following select statement with options gotten from a php code   </p>
  
  <pre><code>&lt;select name='friends[]' id='friends' class='selectpicker show-tick form-control'
          data-live- search='true' multiple&gt;
      &lt;!-- options here --&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>my jQuery code</p>
  
  <pre><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 &lt; data['length']; i++) {
              options += "&lt;option value='"+data[i]['id']+"'&gt;"+data[i]['name']+"&lt;/option&gt;";
          }
          $("#friends").append(options);
      }
  });
  </code></pre>
  
  <p>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.</p>