how to insert data into select2 search input after scan using qrcode

Question

Example results that i want :

I already did the qrcode scan and select2. It is working fine. The problem is I want that data "SBD2P3000002" to be searched in the select2 dropdown. Already tried with the input tag and its working, but with the select2 dropdown, it is not working.

here my code :

      <video id="preview" width="100%"></video>
            //this input form working
            <input type="text" id="text">
        
          //this not working
          <div class="row">
            <div class="input-group mb-3 col-md-12">
              <select class="custom-select select2" id="add_order" name="variants">
                <option selected>Tambah Pesanan...</option>
                <?php
                  if(!empty($variants))
                  {
                    foreach ($variants as $key) { ?>
                      <option 

                      value="<?php echo $key['variant_id'] ?>"
                      data-sn="<?php echo $key['v_sn'] ?>"
                      data-price="<?php echo $key['v_kaunter'] ?>"
                      data-size="<?php echo $key['v_size'] ?>"
                      data-length="<?php echo $key['v_length'] ?>"
                      data-width="<?php echo $key['v_width'] ?>"
                      data-weight="<?php echo $key['v_weight'] ?>"
                      data-sb="<?php echo $key['v_sb'] ?>"
                      data-pay="<?php echo $key['v_pay'] ?>"
                      data-margin="<?php echo $key['v_margin'] ?>"
                      data-margin_pay="<?php echo $key['v_margin_pay'] ?>"
                      data-mutu="<?php echo $key['mutu'] ?>"
                      data-setup_price="<?php echo $key['setup_price'] ?>"
                      data-serial_berat_price="<?php echo $key['serial_berat'] ?>"
                      data-product_name="<?php echo $key['product_name'] ?>"
                      data-product_id="<?php echo $key['product_id'] ?>"

                      ><?= $key['v_sn'] ?></option>
                    <?php }
                  }
                ?>
              </select>
            </div>

<script type="text/javascript">
  let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
  scanner.addListener('scan', function (content) {
    console.log(content);
  });
  Instascan.Camera.getCameras().then(function (cameras) {
    if (cameras.length > 0) {
      scanner.start(cameras[1]);
    } else {
      console.error('No cameras found.');
    }
  }).catch(function (e) {
    console.error(e);
  });
  scanner.addListener('scan',function(c){
    $search = document.getElementById("text").value=c;
    $("#add_order").data("select2").dropdown.$search.val()
  });
</script>

Answer 1

have you initilized the select2? i dont see that in your coding...

$('#add_order').select2();

to be sure your DOM is loaded, encapsulate your script inside this function

$(function(){
  //Your script
  console.log($('#add_order').lenght);//should display 1!
  $('#add_order').select2();
   :
   :
});

to put a value (which exists) in search box, you have to write:

$('#add_order').val("yourvalue").trigger("change");