使用条形码扫描仪自动完成搜索

Question

我已经实现了自动完成搜索，用户在其中输入产品名称并建议名称，通过单击名称，它会将其信息添加到现有表中。

但是对于条码扫描器，当它扫描产品时，产品名称会自动输入到输入框中。但是自动完成没有任何建议。

当条码扫描器扫描产品时，如何继续提供建议？ 这是我用于自动完成搜索的代码。

查看：

<div class="form-group m-form__group">
  <label for="exampleInputEmail1">Search by product name or barcode
       </label>
  <input type="text" autofocus class="form-control m-input" id="productSearch" aria-describedby="emailHelp" placeholder="Product name">
</div>

JavasSript 部分：

$('#productSearch').autocomplete({
  source: '{!! asset('productSearch') !!}',
  select:function(suggestion,ui) {    
    var markup = "<tr id="+ui.item.id+"><input type='hidden' name='product_id[]'  value="+ui.item.id+"><td><i class='flaticon-delete-1 delete-row' onclick='deleteRow(this)'></i></td><td>"+ui.item.value+"</td><td>"+ui.item.unit_price+"</td><td><input type='text' name='quantity[]' class='quantity' value='1'></td><td class='total'>"+ui.item.unit_price+"</td><td>"+ui.item.notes+"</td> </tr>";              
    $("table tbody").append(markup);          
  }
})

Answer 1

条形码不会触发任何关键事件，因此您可以执行以下操作：

$('#my_field').on({
    keypress: function() { typed_into = true; },
    change: function() {
        if (typed_into) {
            alert('type');
            typed_into = false; //reset type listener
        } else {
            alert('not type');
        }
    }
});

根据您想要评估的时间，您可能希望在提交时而不是在更改时进行检查。

Answer 2

在 keydown 事件上触发自动完成，因此如果您的输入值不为空（由条形码扫描仪更新），您可以触发它：

if (!$('#productSearch').val()){
    $('#productSearch').trigger('keydown');
}