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

Question

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

HTML

此复选框的每个操作都会使用 return 代码填充 select

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

            }
        });
    }

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

Answer 1

你需要使用 $("#number_proc").chosen() 来初始化选择的 select-box 然后每当新的选项被添加到这个 select-box 你可以使用 trigger("chosen:updated") 到 re-build/refresh 选择 select 更新内容 .

演示代码 :

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

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

ajax method using chosen autocomplete

php

jquery

ajax

autocomplete

jquery-chosen