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');
}

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

2 个答案: