如何在使用 qrcode 扫描后将数据插入 select2 搜索输入

Posted 2023-05-07

【中文标题】如何在使用 qrcode 扫描后将数据插入 select2 搜索输入

【英文标题】：how to insert data into select2 search input after scan using qrcode

【发布时间】：2021-05-23 17:12:25

【问题描述】：

我想要的示例结果：

我已经做了二维码扫描和select2。它工作正常。问题是我希望在 select2 下拉列表中搜索数据“SBD2P3000002”。已经尝试使用输入标签及其工作，但使用 select2 下拉菜单，它不起作用。

这里是我的代码：

      <video id="preview" ></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-
                      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>

【参考方案1】：

您是否已初始化 select2？我在你的编码中没有看到...

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

为确保您的 DOM 已加载，请将您的脚本封装在此函数中

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

要在搜索框中输入一个值（存在），你必须写：

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

【讨论】：

在加载 DOM 后，例如在脚本的开头，

做一个console.log($('#add_order').length);在初始化之前，您必须找到 1 以确保 DOM 已加载。查看我的答案已修改...

我添加了该代码并且控制台输出为 1，但仍然 select2 搜索空白，我希望 select2 搜索输入自动插入我扫描的 qrcode 数据（这是我已经得到的 $select），即表单输入只是我想要的一个例子

确定您的扫描值是否存在于下拉值中？

值存在，我添加了示例图片