当鼠标单击或输入时，选择2 js返回数据不选择

Question

当我的选择字段加载时，它会成功渲染。一旦我输入至少两个字符，它就会成功从服务器中提取项目并将它们列为选项。但是，如果我尝试选择其中一个，则没有任何反应。下拉弹出窗口保持打开状态。在实际领域没有任何东西。 JavaScript控制台中没有错误。它就像我没有点击任何东西。

$(document).ready(function() {
  $(".cusName").select2({
    placeholder: '--- Select Item ---',
    //allowClear: true,
    ajax: {
      url: '<?php echo base_url();?>search',
      dataType: 'json',
      delay: 250,
      processResults: function(data) {

        console.log(data)

        return {
          results: data
        };
      },
      cache: true
    }
  });

  $(".cusName").on('change', function() {
    var data = $(".cusName").select2('data')[0];
    console.log(data);
    $("#cus_id").val(data.customer_id);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />

 <select class="cusName form-control" name="cusName"> </select>

<div class="col-sm-8">
  <input type="text" class="form-control" id="cus_id" name="cus_id" value="">
</div>

Answer 1

因为您的问题不是根据您的描述进行的ajax调用我将其替换为硬编码值，请参阅下面的代码片段，如果它按照您希望的方式工作

$(document).ready(function() {
  $(".cusName").select2({
    placeholder: '--- Select Item ---',
    allowClear: false
  });

  $(".cusName").on('change', function() {
    var data = $(".cusName").val();
    console.log(data);
    $("#cus_id").val(data);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />

<select class="cusName form-control" name="cusName">
<option value="">select Any</options>
<option value="apple">apple</options>
<option value="mango">mango</options>
<option value="juice">juice</options>
</select>

<div class="col-sm-8">
  <input type="text" class="form-control" id="cus_id" name="cus_id" value="">
</div>