Автозаполнение поиска со сканером штрих-кода - PullRequest
Новая
       7

Автозаполнение поиска со сканером штрих-кода

0 голосов
/ 03 июля 2018

Я реализовал поиск автозаполнения, в котором пользователь пишет название продукта, и ему будет предложено имя, и, щелкнув по имени, он добавит свою информацию в существующую таблицу.

Но для сканера штрих-кода, где имя продукта будет автоматически введено в поле ввода при сканировании продукта. Но автозаполнение ничего не предлагает.

Как продолжить с предложением, когда сканер штрих-кода сканирует продукт? Вот код, который я использовал для поиска автозаполнения.

Вид: 

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

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Автозаполнение запускается при событии keydown , поэтому вы можете запустить его, если значение вашего ввода не пустое (оно обновляется сканером штрих-кода): 

if (!$('#productSearch').val()){
    $('#productSearch').trigger('keydown');
}
0 голосов
/ 03 июля 2018

Хорошо, штрих-код не будет запускать какие-либо ключевые события, поэтому вы можете сделать что-то вроде: 

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

В зависимости от того, когда вы хотите оценить это, вы можете выполнить эту проверку не на изменения, а на отправку или что-то еще.

...