javascript — автозаполнение поиска с помощью сканера штрих-кода
Я реализовал поиск автозаполнения, где пользователь пишет имя продукта, и будет предложено имя, и, нажав на имя, он добавит свою информацию в существующую таблицу.
Но для сканера штрих-кода, где имя продукта будет автоматически помещено в поле ввода, когда оно сканирует продукт. Но автозаполнение ничего не предлагает.
Как продолжить с предложением, когда сканер штрих-кода сканирует продукт?
Вот код, который я использовал для поиска автозаполнения.
Посмотреть:
<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);
}
})
Решение
Ну, штрих-код не будет запускать какие-либо ключевые события, так что вы можете сделать что-то вроде:
$('#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');
}
}
});
В зависимости от того, когда вы хотите оценить это, вы можете выполнить эту проверку не на изменение, а на отправку или что-то еще.
Другие решения
Автозаполнение запущено на KeyDown событие, так что вы можете вызвать его, если значение вашего ввода не пусто (оно обновляется сканером штрих-кода):
if (!$('#productSearch').val()){
$('#productSearch').trigger('keydown');
}