I have the latest version of select2 collection of products, and i want to show the image of the product on a single img tag dynamically according to my select2 cursor while I'm browsing for the product so I can make sure that the product i'm about to choose is the right product since some product have a similiar name.
My select2 options is based on the chosen customer ny onchange using ajax
so far I tried to use 'on' and select2:selecting listener, and it's not working.
here's my progress:
the html:
<select type="text" class="js-example-basic-single"
style="width: 100%" id="search" onchange="toCart()">
</select>
the JQuery:
$('#search').on('select2:selecting', function () {
console.log($(this).val());
});
If you find my question is vague, please kindly leave a comment so I can improve my question. thank you.
It sounds for me like you are looking for a way to get the highlighted option text and value from the select2 dropdown menu.
The selecting event is not made for this. It is fired just before you select something, in the moment you click on it or press enter.
select2 doesn't provide a "highlight/hover"-event and getting the highlighted field requires you to use the capture-event-phase or a mutation observer if you don't want to modify it.
Here is an example with the capture events:
$('#example').select2()
.on("select2:opening", () => ($(img).show(), onHighlight()))
.on("select2:closing", () => ($(img).hide(), onHighlight()));
function onHighlight(event) {
/*
both events are stopped at the element to prevent the
page from scrolling when using arrow keys from within
the search field
this means, the capture phase is required and since the
dropdown is not build when the event triggers, you have
to wait for a short moment with setTimeout or
requestAnimationFrame
*/
setTimeout(() => {
// only for the "#example" select2
const el = document.querySelector(`[id^="select2-example-"].select2-results__option--highlighted`);
if (el) {
// depending on the id of the original select, the value to slice differs
const value = el.id.split("-").slice(4).join("-"),
text = el.innerText;
// set the image matching the text and value
img.src = `https://dummyimage.com/300x100/000/ffffff?text=value:${value}+text:${text}`;
console.log(value, text);
}
});
}
document.body.addEventListener("mouseenter", onHighlight, true);
document.body.addEventListener("keydown", onHighlight, true);<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select id="example" multiple="multiple" style="width: 100%;">
<option value=0>January</option>
<option value=1>February</option>
<option value=2>March</option>
<option value=3>April</option>
<option value=4>May</option>
<option value="Än Êxámplè">Foobar</option>
</select>
<img id="img" style="position: fixed; top: 0; left: auto; right: 0; display: none; z-index: 1234">The select2 events do not appear to cater for your scenario.
The select2:selecting event is a "pre-select" - ie the user has selected an element and the event allows your code to cancel that selection.
With the templateResult templating built-in to select2, you can create any DOM in the drop down and thus apply events to those DOM elements.
Unfortunately, as noted in the comments, each select2 li has some padding/border that means using an event on the inner (templated) element will not trigger on the whole of the li, even with some mitigation such as setting 100% width.
Instead, you can listen on .select2-results__option
Then you just need to add enough information to the inner templated html so that you can create your preview. Here's an example using the original <option> value=:
$('.select2').select2({
templateResult: template
});
function template(state) {
if (!state.id) {
return state.text;
}
var $state = $(`<span class='mySelect2Option' data-value='${state.element.value}'>` +
state.element.text +
"</span>");
return $state;
}
$(document).on("mouseenter", ".select2-results__options>.select2-results__option", function() {
var option = $(this).find(".mySelect2Option");
$("#preview").text(option.data("value"))
});#preview {
float: right;
margin-right: 5em; /* so not hidden by [result] */
width: 2em;
border: 1px solid #ccc;
padding: 1em;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<div id='preview'></div>
<select class="select2">
<option value="AL">Alabama (longer entry)</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>