Search code examples
javascriptphpcodeigniterjquery-select2

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


image

Example results that i want :

enter image description here

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>

Solution

  • 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");