Search and select on tab

How Do I...
#1

I need to be able to select on TAB when searching. I set to true the selectOnClose, and it was working, but now it doesn’t anymore. I needed it to be working on Internet Explorer 11.

I already tried to comment some bits of my code that I thought it could be the problem (like a theme I added or the jQuery validate), but I can’t find what is not working.

My web interface’s purpose is to make faster the process of stocking new material by generating a CSV file after a multi-step form is filled up. In one of the steps, I have a select2 with a big list of computer models. For saving time I generated 128 barcodes for the models that are more frequent. The barcode scanner is configured with the TAB as terminator because for the 3rd step we have to add the serial numbers of each item and it is way faster if the inputs are filled using the barcode scanner (and the tab allows to pass to next input).

Here you can see the snippet I made for asking another question about my code -> StackOverflow - Snippet

#2

selectOnClose works in my sample code: https://codepen.io/John30013/project/editor/Abdgnk (try typing “lorem” and then press TAB). (However, it won’t work on IE11 because I’m using JavaScript features [like arrow functions] that IE11 doesn’t support.)

I think the problem is that, when you initialize the Select2 with your model data, you are not including the selectOnClose configuration option:

      $('#pc_model').select2({
        'data': data,
        placeholder: "Selectionnez un modèle",
        allowClear: true
      });

(or possibly…)

        $('#hard_model').select2({
          'data': data,
          placeholder: "Selectionnez un modèle",
          allowClear: true
        });

I believe you need to include selectOnClose each time you initialize a Select2. It’s not enough to set that configuration once at the beginning of your script. Alternatively, you can set selectOnClose as a global default (at the beginning of your script) as follows:

$.fn.select2.defaults.set("selectOnClose", true);

That will set the selectOnClose configuration true on every Select2 you initialize.

1 Like
#3

Thank you John I put the selectOnClose as default at the beginning of the script as you suggested and it works perfectly.

#4

Excellent! I’m glad it worked for you, galactica!

If you don’t mind, please click the “heart” icon below my answer. That helps boost my reputation on this forum and lets people know they can trust my suggestions.

1 Like
#5

Done and I did it for the other topic as well :slight_smile:

1 Like