CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Polovitch
Polovitch

Reputation: 41

Using select2 with a jQuery Virtual Keyboard?

I'd like to know if there is any way to use a jQuery virtual Keyboard for typing into a Select2 select bar.

Because when you click away from the Select2 component, the dropdown closes automatically. And that doesn't let you use any web based virtual keyboard.

If you have ideas, thanks for any help !

Upvotes: 4

Views: 820

Answers (2)

Amit Adhikary
Amit Adhikary

Reputation: 1

$('#customer_id, #customer_id111').select2({
  $('#customer_id, #customer_id111').on('select2:open', function (e) {

  });
});

Not working for multiple dropdown in a page

Upvotes: -1

Swiffy
Swiffy

Reputation: 4693

Phew, that took a while! I made a barebones demo for you. Just click on the select and a keyboard will pop up.

The trick here is that the select2 search input doesn't exist in the DOM before user clicks the select, so we use the select2:open event to find the select2 text input after it is appended to the DOM and then attach the jquery virtual keyboard to it.

// Make the Select2 select
$('#sel').select2({
  dropdownCssClass: 'keyboard_target_wrapper'
});

// We don't want to accidentally make multiple virtual keyboards
let kb_bound = false;

// Wait until the Select2 select is opened
// as the Select2 select input element
// might not be in the DOM yet
$('#sel').on('select2:open', function (e) {

  // Save the search input query
  let $select2SearchInput = $('.keyboard_target_wrapper')
        .find('.select2-search__field')
        
  // If we already have an initialized virtual keyboard
  // we just return it
  if(kb_bound) {
    $('.keyboard_target_wrapper')
    .find('.select2-search__field')
    .getkeyboard();
    return;
  }

  // Create the virtual keyboard
  $select2SearchInput.keyboard({
    openOn: 'focus',
    appendLocally: false, // Append to body
    appendTo: 'body',
    usePreview: false, // Hide the text preview on the keyboard
    reposition: true, // Make keyboard react to viewport changes
    layout: 'qwerty',

    css: {
      container: 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',
      popup: ''
    },

    stopAtEnd: true,
    resetDefault: false,

    beforeInsert: function(e, keyboard, el, str) {
       // Must trigger keyup event on the Select2
       // search input manually, because
       // the virtual keyboard doesn't do it
       $select2SearchInput.keyup();
       
       // Just return the input text normally
       return str;
    },
  });
  
  kb_bound = true;
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.4/css/keyboard.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script
  src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.4/js/jquery.keyboard.min.js"></script>

<select id="sel">
  <option value="Cat">Cat</option>
  <option value="Dog">Dog</option>
  <option value="Bird">Bird</option>
  <option value="Fish">Fish</option>
  <option value="Dinosaur">Dinosaur</option>
</select>

Upvotes: 2

Related Questions