如何配置ajax select2以使用条形码扫描仪

Question

我有一个 ajax select2 (v 3.5.4) 完美工作，但现在我需要它与条形码扫描仪一起使用。 我需要检测何时按下回车键。扫描器将代码插入 select2 输入，然后按 Enter 键。

问题是扫描仪速度太快，在按下回车键之前，ajax 调用无法完成。

这是我到目前为止的代码：

$('#my_select').select2
    initSelection: (elm, callback) ->
      data =
        id: $(elm).data "record-id"
        name: $(elm).data "record-text"
      callback(data)
    ajax:
      url: url
      dataType: "jsonp"
      quietMillis: 100
      data: (term, page) ->
         query: term
         limit: 10
         page: page
      results: (data, page) ->
         more = (page * 10) < data.total

         results: data.records
         more: more

Answer 1

我有类似的问题并设法使用以下补丁修复它。 （这是针对 v4.0.2 的。）

--- a/select2.js    2018-03-09 08:33:38.000000000 +0700
+++ b/select2.js    2018-05-04 10:38:22.605348402 +0700
@@ -896,7 +896,7 @@
     var $loading = this.option(loading);
     $loading.className += ' loading-results';

-    this.$results.prepend($loading);
+    this.$results.html($loading);
   };

   Results.prototype.hideLoading = function () {

Answer 2

我也有类似的问题。我需要在页面重新加载后设置一个值。我想，我的解决方法也可以帮助你。但也许有人知道更好的方法？

我用ajax结果初始化了

select2

框（在您的示例代码“12345”中）：

var selectionList = [{ id: '12345', text: '12345' }];
$("#my_select").select2({
                                data: selectionList
                            });

然后我设置该值并触发

change

事件。

$("#my_select").val("12345").trigger("change");

之后，我通过

select2

加载再次初始化了

ajax

框。这是您在上面发布的代码：

$('#my_select').select2
    initSelection: (elm, callback) ->
      data =
        id: $(elm).data "record-id"
        name: $(elm).data "record-text"
      callback(data)
    ajax:
      url: url
      dataType: "jsonp"
      quietMillis: 100
      data: (term, page) ->
         query: term
         limit: 10
         page: page
      results: (data, page) ->
         more = (page * 10) < data.total

         results: data.records
         more: more

通过这种方式，您已在

ajax

框中设置了

select2

值。 我不确定这是否是您想要实现的目标。或者你真的需要触发按下的回车键吗？如果此解决方案对您有帮助，请告诉我。谢谢。

Answer 3

我遇到了类似的问题，并通过以下代码解决了：

 $('#products').select2({
    dropdownParent: $("#add_modal"),
    theme: "bootstrap",
    placeholder: 'Select product',
    allowClear: true,
    minimumInputLength: 4,
    ajax: {
        url: '/shop-all-products',
        delay: 500,
        data: function (params) {
            var query = {
                search: params.term
            }
            return query;
        }
    }
})

希望对您有帮助。