使用條形碼掃描儀自動完成搜索

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

自動完成是在鍵盤按下事件時觸發的，因此，如果輸入的值不為空（由條形碼掃描儀更新），則可以觸發自動完成：

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