CODEWITHSUNDEEP
jqueryjquery-select2
vtQQ
vtQQ

Reputation: 37

How to get Select2 select via keyboard up-down before actually selecting it?

I want to display url image of a select list but currently I can only get it to display it if I actually select it.

What I want is to display the images as I navigate through the list with up and down keys. The currently blue highlighted one should display its image, then I press down and the next item in the list which gets highlighted should now display its image and so on.

HTML:

<select id="mycombo">
  <option url="https://placekitten.com/200/301" value="kitten1">Kitten 1</option>
  <option url="https://placekitten.com/200/302" value="kitten2">Kitten 2</option>
  <option url="https://placekitten.com/200/303" value="kitten3">Kitten 3</option>
  <option url="https://placekitten.com/200/304" value="kitten4">Kitten 4</option>
</select>
<p></p>
<img src="https://placekitten.com/200/300" alt="" id="myimage">

JS:

$('select').select2();

var $eventSelect = $("#mycombo");

$eventSelect.on("select2:select", function (e) {
  var title = $("#select2-mycombo-container").attr("title");
  var myurl = $('#mycombo option').filter(function () { return $(this).html() == title; }).attr("url");

  $("#myimage").attr("src",myurl);        
});

https://codepen.io/vtastek/pen/ZwGGMN

Optionally, I would like to not see the drawer while navigating through the list. I couldn't figure which select2 version I am working with but I assume it is an old one.

Upvotes: 1

Views: 1274

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

Select2 creates on the fly a container on open and destroys such a container on close events.

Hence, you need to delegate the keyup event on the input search box:

$(document).on('keyup', 'span.select2-container--open input.select2-search__field', function(e) {
    if (e.which == 40 || e.which == 38) {
        var idx = $(this).closest('.select2-dropdown').find('li.select2-results__option--highlighted').index();
        var myurl = $('#mycombo option').eq(idx).attr('url');
        $("#myimage").attr("src",myurl);
    }
})


$(document).on('keyup', 'span.select2-container--open input.select2-search__field', function(e) {
    // on arrow down or up
    if (e.which == 40 || e.which == 38) {
        var idx = $(this).closest('.select2-dropdown').find('li.select2-results__option--highlighted').index();
        var myurl = $('#mycombo option').eq(idx).attr('url');
        $("#myimage").attr("src",myurl);
    }
})

$('select').select2();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<select id="mycombo">
    <option url="https://placekitten.com/200/301" value="kitten1">Kitten 1</option>
    <option url="https://placekitten.com/200/302" value="kitten2">Kitten 2</option>
    <option url="https://placekitten.com/200/303" value="kitten3">Kitten 3</option>
    <option url="https://placekitten.com/200/304" value="kitten4">Kitten 4</option>
</select>
<p></p>
<img src="https://placekitten.com/200/300" alt="" id="myimage">

Upvotes: 1

Related Questions