ajax method using chosen autocomplete

Question

I am trying to modify this select for autocomplete using chose or the autocomplete itself, but without success, below my implementations

• HTML

Each action of this chckbox populates the select with the return codes

<div class="form-group">
                <input type="checkbox" name="resale" id="resale" value="1" data-toggle="toggle" 
                    data-on="Yes" data-off="No" onchange="getProcessesRosale()" />
            </div>

    <select name="number_proc" id="number_proc" class="form-control" onchange="getProducts()"> </select>

AJAX/ JS

function getProcessesRosale() {
        $.ajax({
            url: './getProcessesRosale',
            dataType: 'json',
            type: 'get',
            data: {
                'client': $('#cgc').val()
            },
            success: function(data) {
                    $('#number_proc').find('option').eq(0).text('');
                    var htm = '';
                    $('#number_proc').find('.forpgto').remove();
                    for (var i in data) {
                        if(data[i].saldo != "0"){
                            alert(data[i].cod_devolution);
                            htm += `<option value="`+ data[i].cod_devolution+`" class="forpgto">`+ data[i].cod_devolution+ `</option>`;
                        }
                    }
                
                $('#number_proc').append(htm);
            },
            error: function(data) {

            }
        });
    }

Due to these methods, I select the population, but now there has been a change and we need to make a sleect that allows research, but I am trying to import and implement the chosen jquery and autocomplete without success, someone could help with an example and suggestions on how to solve it. Thanks in advance for your help

Answer 1

You need to use $("#number_proc").chosen() to initialize chosen select-box then whenever new options gets added inside this select-box you can use trigger("chosen:updated") to re-build/refresh chosen select with updated content .

Demo Code :

$("#number_proc").chosen({
  width: "95%"
}); //initialize chosen selct box
//just dummy data..
var data = [{
  "cod_devolution": "mno",
  "saldo": "1"
}, {
  "cod_devolution": "xyz",
  "saldo": "2"
}, {
  "cod_devolution": "hef",
  "saldo": "3"
}]

function getProcessesRosale() {
  /*$.ajax({
   //other codes..
    success: function(data) {
      $('#number_proc').find('option').eq(0).text('');
      var htm = '';
      $('#number_proc').find('.forpgto').remove();*/
  var htm; //decalre this outside
  htm += `<option>Select</option>`
  for (var i in data) {
    if (data[i].saldo != "0") {
      htm += `<option value="` + data[i].cod_devolution + `" class="forpgto">` + data[i].cod_devolution + `</option>`;
    }
  }

  $('#number_proc').html(htm); //use .html
  $("#number_proc").trigger("chosen:updated"); //update selectbox with new optins
  /*   },
     error: function(data) {

     }
   });*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<div class="form-group">
  <input type="checkbox" name="resale" id="resale" value="1" data-toggle="toggle" data-on="Yes" data-off="No" onchange="getProcessesRosale()" />
</div>

<select name="number_proc" id="number_proc" class="form-control">
  <option>Select</option>
  <option>abc</option>
  <option>hef</option>

</select>