Dynamic completion autocomplete

Question

I’m trying to use the Bootstrap + Chosen, in my select option to make a combobox with autocomplete.

Only I’m filling in the select dynamically with jquery.

But when implementing Bootstrap + Chosen the dynamic padding doesn’t work, while Chosen does and if I take out Chosen the dynamic padding works.

My fill is like this:

function carregarComboSetor( idSetor ){
      $.ajax({
          url      : 'funcao/setor.php',
          type     : 'post',
          dataType : 'json',
          data : {
            acao : 'S',
            cdsetor : idSetor
          },
          success : function (data) {
              var op = "<option value='0'>Selecione um setor</option>";
              $('#setor').append(op);
              $.each( data.setor, function (key, value) {
                  var option = "";
                  if( idSetor === value.codsetor ){
                      option = "<option value='"+ value.codsetor +"' selected>"
                                 + value.nmsetor
                               +"</option>";

                  }else{
                      option = "<option value='"+ value.codsetor +"'>"
                               + value.nmsetor
                               +"</option> ";
                  }
                 $('#setor').append(option);
              } );
              $('#setor').val( idSetor );
          }

      });

}

EDITION 1

In the console only shows these texts

Answer 1

I managed to solve!

I added within my function to load Combo the following line:

$('#setor').trigger("chosen:updated");

Thus remaining:

function carregarComboSetor( idSetor ){
    /* resto do codigo **/
          success : function (data) {

               /* resto do codigo **/

              $.each( data.setor, function (key, value) {
                 /* resto do codigo **/

              } );
             /* resto do codigo **/
              $('#setor').trigger("chosen:updated");
          }

      });

}

Answer 2

I think you should do the parse of json received by the function success:

function carregarComboSetor( idSetor ){
      $.ajax({
          url      : 'funcao/setor.php',
          type     : 'post',
          dataType : 'json',
          data : {
            acao : 'S',
            cdsetor : idSetor
          },
          success : function (data) {

              var data = JSON.parse(data); // esta linha

              var op = "<option value='0'>Selecione um setor</option>";
              $('#setor').append(op);
              $.each( data.setor, function (key, value) {
                  var option = "";
                  if( idSetor === value.codsetor ){
                      option = "<option value='"+ value.codsetor +"' selected>"
                                 + value.nmsetor
                               +"</option>";

                  }else{
                      option = "<option value='"+ value.codsetor +"'>"
                               + value.nmsetor
                               +"</option> ";
                  }
                 $('#setor').append(option);
              } );
              $('#setor').val( idSetor );
          }

      });

}