充满条码扫描仪的自动完成建议输入框

Question

我试图实现自动完成搜索，我将在其中写一些东西，相关数据将显示在自动完成搜索中，但我也想用条形码扫描仪输入填充输入框。当输入框填满扫描仪时，它会提示相关数据。但是我在这里遇到的问题是，当我写一些东西时它显示了相关数据但是当条码扫描输出填充到输入框中时，它没有提示..我该如何实现？

HTML代码：

<input type="text" required autofocus  class="form-control m-input" id="customerSearch" placeholder="Customer name">

JavaScript代码：

    $('#customerSearch').autocomplete({
       source: '{!! asset('customerSearch') !!}',
       select: function(suggestion,ui) {
           // $("#customer_id").val(ui.item.id);           
       }
    })

Answer 1

自动对焦在按键事件时触发，因此代码扫描器不会触发它。输入更改后，您必须自己触发事件。试试这个：

  $('#customerSearch').on('input', function(){
     $('#customerSearch').trigger('keydown');
  });

Answer 2

将值插入输入不会触发事件

我建议尝试以下操作来触发事件，如果有效，事件应该会触发 jQuery 自动完成更新。

创建活动：

const event = new Event('keydown')

然后发送这个事件：

customerSearch.dispatchEvent(event)

这也可以用 jQuery:

jQuery('#customerSearch').trigger('keydown')
// or
$('#customerSearch').trigger('keydown')

您需要 trigger/dispatch 您的代码扫描器更改输入值后的事件。那看起来像这样：

customerSearch.value = codeScannerValue
// or however it actually works

$('#customerSearch').trigger('keydown')
// or
customerSearch.dispatchEvent(new Event('keydown'))

充满条码扫描仪的自动完成建议输入框

Autocomplete suggestion input box filled with bar code scanner

javascript

php

jquery

jquery-ui-autocomplete

将值插入输入不会触发事件