Dynamic Fill Autocomplete

Question

Dynamic Fill Autocomplete

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

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

But I'm doing the fill of select dynamically with jquery.

But when implementing Bootstrap + Chosen, the dynamic fill does not work, whereas the chosen one works, and if I get the chosen dynamic fill works.

My padding looks 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 );
          }

      });

}

EDITIONS 1

In the console only shows these texts

bootstrap-3 chosen-jquery-plugin

asked by anonymous 24.08.2017 / 19:23

2 answers

0

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

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 );
          }

      });

}

24.08.2017 / 19:40

java response json out of order Save int, but display texts

score 1 · Accepted Answer

I solved it!

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

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

Looking like this:

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");
          }

      });

}