Ytukyg

I have an ajax select2 (v 3.5.4) perfectly working but now I need it to work with a barcode scanner.
I need to detect when enter key is pressed. The scanner inserts code into select2 input followed by an enter key.

The problem is the scanner is too fast and the ajax call does not get to finish before enter key is pressed.

This is my code so far:

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

I have similar problem and manage to fix it with following patch. (It's against 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 () {

I had a similar issue. I needed to set a value after page reload. I think, my workaround could help you, too. But maybe someone knows a better way?

I initialized the select2 box with the ajax result (in your example code '12345'):

var selectionList = [{ id: '12345', text: '12345' }];

$("#my_select").select2({

                                data: selectionList

                            });

Then I set the value and triggered the change event.

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

After that, I initialized the select2 box again with ajax loading. This is the code you posted above:

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

With this way, you have set your ajax value in the select2 box.
I'm not 100% sure, if this is what you want to achieve. Or do you really need to fire the pressed enter key? Please let me know, if this solution helped you. Thanks.