使用所选自动完成的 ajax 方法

Question

我正在尝试使用选择或自动完成本身修改此选择以进行自动完成，但在我的实现下方没有成功

• HTML

此 chckbox 的每个操作都使用返回码填充选择

<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) {

            }
        });
    }

由于这些方法，我选择了人口，但现在发生了变化，我们需要做出一个允许研究的选择，但我正在尝试导入和实现选择的 jquery 和自动完成但没有成功，有人可以帮忙有一个例子和如何解决它的建议。提前感谢您的帮助

Answer 1

您需要使用 $("#number_proc").chosen() 来初始化选定的选择框，然后每当在此选择框中添加新选项时，您都可以使用trigger("chosen:updated") 使用更新的内容重新构建/刷新选定的选择。

演示代码：

$("#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>