We Keep Coding

Disable auto focus on drop-down open of select2?

I tried to disable auto focus of input search inside select2 especially on mobile to disable keyboard popup. However, as documented here:
select2 will not be triggering the native events. select2 will also
not be triggering non-native versions of the events, which is less of
an issue as we still have the option to add the native events without
breaking compatibility.
So the only way I could do is to try to get every input box inside select2 that was currently on focused and set lose focus, but has no luck.
$("select").select2().on("select2-open",":input",function(){
setTimeout(function(){
$(":focus").blur();
}, 50);
});
Is there any possibility that I could achieve that result above? Thanks.

Finally, I managed to find solution which works just fine for me as below:
/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(e){
$('.select2-search input, :focus,input').prop('focus',false).blur();
}
$("select").select2().on("select2-open", hideSelect2Keyboard);
$("select").select2().on("select2-close",function(){
setTimeout(hideSelect2Keyboard, 50);
});
Tested on Tablet, and iOS device. In function hideSelect2Keyboard(), I searched for every current focus element, include input field which could be used to initialized select2, setting .prop('focus',false) which will remove focus and consequently disable keyboard popup on select2-open and select2-close event, by chaining .blur() is to remove focus border from element. Then I attached this function to select event open and close and it works just fine.
I hope this will help other who searching for this as me too. Thanks.

I think I've found a solution for select v3 - tested in v3.5.4.
We can use the option shouldFocusInput, which must be a function that should return true or false.
So initialize the plugin with the following code:
$(document).ready(function() {
$('select').select2({
shouldFocusInput: function() {
return false;
}
});
});
Codepen demo: https://codepen.io/andreivictor/pen/JmNzvb
If you want to disable the auto-focus only on mobile devices, my approach is to use Modernizr library, which can test for the existence of Touch Events in the browser.
So the complete code should be:
$(document).ready(function() {
$('select').select2({
shouldFocusInput: function() {
if (Modernizr.touch) {
return false;
}
return true;
}
});
});

I am not sure why, but the above solutions didn't work for me. But this one worked-
$('select').on('select2:open', function (event) {
$('.select2-search input').prop('focus',false);
});

How to check if dropdown is open in Select2?

I'm using select2 and in my site. I need to know at some point if the dropdown is open or closed. I've studied the documentation but I don't see how this can be done. For example, something like this would be nice:
if ($('select').select2('isOpen') === true) { ... }
Any suggestions?

In version 4.0 of select2 you can listen to select2:opening, select2:open, select2:closing and select2:close events on select element, for example:
$('select').on('select2:open', function (e) {
// select2 is opened, handle event
});

Select2 4.0 has an isOpen method. If #mySelect is your HTML select element then:
$('#mySelect').data('select2').isOpen()
...will return true or false depending on the state of Select2.

By doing some code inspection, it looks like select2-dropdown-open is the class that it adds. But there is an event select2-open in the documentation that fires when the dropdown is open. You can use that to set a variable, or perform an action (also select2-close).
You can do something like this:
$("#e11").on("select2-open", function() {
$(this).data("open", true);
});
$("#e11").on("select2-close", function() {
$(this).data("open", false);
});
if ($("#e11").data("open")) {
//do something
}
2018 Edit
It appears that the names of the events have been updated since 2014. See user1636505's answer below.

As of Select2 4.0.6, this has been updated to the following
$("#foo").select2("isOpen")
This will return true/false
Hope this helps!

change is fired whenever an option is selected or removed.
select2:open is fired whenever the dropdown is opened. select2:opening is fired before this and can be prevented.
select2:close is fired whenever the dropdown is closed. select2:closing is fired before this and can be prevented.
select2:select is fired whenever a result is selected. select2:selecting is fired before this and can be prevented.
select2:unselect is fired whenever a result is unselected. select2:unselecting is fired before this and can be prevented.

It's better to do this:
var select2 = $('#selectorname').data('select2');
if (select2.opened()) {
//do it
} else {
//dont do it
}

$('select').select2('isFocused');
https://github.com/select2/select2/issues/39

It works perfectly.
$(".select2-container").is(":visible")

Javascript (jQuery) / HTML: Setting an <input> or <select> to enabled, not working?

I'm currently using Mozilla Firefox 14.0.1 and Google Chrome 20.0.1132.57 (latest I think).
My code goes something like this: http://jsfiddle.net/SVtDj/
Here's what I want to happen:
Enter something on input1
Click the disabled input (to trigger the onchange function... see jQuery)
NOTE: After inputting stuff on input1, we click the disabled input, nothing else.
The disabled input should now be enabled. Since by clicking the disabled input, it should trigger the input1's onchange function.
This works in Google Chrome, however, it doesn't work on Mozilla Firefox. How come clicking on the disabled element does not trigger the input's onchange function? This also applies to clicking a disabled instead of a disabled

Disabled inputs do not trigger change and click events on FireFox.
$('li:eq(1)').click(function(e){
if($.trim($('#input1').val()).length != 0){
$('#input2').prop('disabled', false);
}
});
http://jsfiddle.net/SVtDj/10/
instead of trim() you can use jQuery $.trim()function which is cross-browser:
$('#input1').change(function(){
if($.trim($(this).val()).length != 0){
$('#input2').prop('disabled', false);
}
});
demo

Your code is fine. The issue is that .change() requires a lost of focus (blur) before it triggers. Try changing it to .keyup()
http://jsfiddle.net/SVtDj/6/
additional: this is probably the effect you were going for
$('#input1').keyup(function(){
$('#input2').prop('disabled', $(this).val().trim().length == 0);
});​

To extend Ramison's answer
If you want to toggle the disability on #input2 you can simple:
$('#input1').change(function(){
var isDisabled = !$.trim($(this).val()).length;
$('#input2').prop('disabled', isDisabled );
});
And the demo: http://jsfiddle.net/SVtDj/7/

The issue is Firefox needs you type 'enter' or do something else so input1 looses the focus after having wrote in input1 to cast the "onchange" event I think. Maybe this question is linked to yours, and it made me try the following that works with Firefox. (I didn't try it on other browsers)
$('#input1').bind('input',function(){
if($(this).val().trim().length != 0){
$('#input2').removeAttr('disabled');
}
});​

That's because in FF, when an input is disabled it is really disabled (it doesn't receive mouse clicks).
Clicking on your disabled element doen't produces a blur event (focus lost) on input1, so the onchange doesn't gets fired.
You can workaround this easily with some classes and jQuery. For example:
<input class=disabled id=input2>
some css:
.disabled { background: #888; }
and then...
$(function(){
// disable keypresses on "disabled" input
$('.disabled').keypress(function(e){
e.preventDefault;
e.stopPropagation;
return false;
});
// doesn't allow to focus
$('.disabled').focus(function(e){
$(this).blur();
});
});
to activate the "disabled" element:
$('#input2').removeClass('disabled');
Check it here: http://jsfiddle.net/SVtDj/11/

See the answer of #Andy E in this post Jquery event on a disabled input, i think it is the best solution to resolve your problem.

HTML dropdown can't capture onChange() if there is only one value in dropdown

I am using Jquery, for selecting value of drop-down.
I need do do some action on OnChange event (.change in jQuery) , but if there is only one option in drop-down I am not able to capture it in onChange event.
My drop-down is formed dynamically, so don't know how many options I'll get how many options, but I am facing problem if there is just one option.
Is there any way to capture OnChange event for <select> with only one <option>?

You don't need to have an onchange event. Just have a function that gets called from onchange, and if there is only one item, just go ahead and call that function.
function populate() {
//do work to populate #selector
if($("#selector option").length == 1) {
$("#selector").hide();
workerFunction();
} else {
$("#selector").show();
}
$("#selector").change(workerFunction);
//the following line of code will work like a default:
workerFunction();
}
function workerFunction() {
//put whatever used to be in your onChange function here
}

onchange event occurs when the internal state of the element is changed. Since you have a dropdown with a unique value, its state is never changed so the event is not fired.

<label for="checkboxThatUsedToBeASelect">
<input type="checkbox" id="checkboxThatUsedToBeASelect" name="checkboxThatUsedToBeASelect" value="something" />
</label>
$('#checkboxThatUsedToBeASelect').change( function(){
});
Now you have a more user-friendly input, and it'll trigger the change when it is checked or unchecked. :D

How about a conditional event binder? Something like:
var changeHandler = function (method) {
alert(method);
};
if ($('select option').length > 1) {
$('select').change(function() {
changeHandler('change');
});
} else {
$('select').click(function() {
changeHandler('click');
});
}

It sounds like you have a HTML error in your options tags.
In addition to that, in order to target something created dinamically with jQuery, you have to use delegators.
$('selector').change( function(e){...}); // without delegator
$('body').on('change','selector', function(e){...}); // with delegator, it detects even an element added dinamically
This said, you should be abble to detect on change for new and old elements

.change looks for another inmate to switch places. in your case sadly, there is a home alone case and hence the event is not firing.

Any event triggered on autocomplete?

I have a pretty simple form. When the user types in an input field, I want to update what they've typed somewhere else on the page. This all works fine. I've bound the update to the keyup, change and click events.
The only problem is if you select an input from the browser's autocomplete box, it does not update. Is there any event that triggers when you select from autocomplete (it's apparently neither change nor click). Note that if you select from the autocomplete box and the blur the input field, the update will be triggered. I would like for it to be triggered as soon as the autocomplete .
See: http://jsfiddle.net/pYKKp/ (hopefully you have filled out a lot of forms in the past with an input named "email").
HTML:
<input name="email" />
<div id="whatever"><whatever></div>
CSS:
div {
float: right;
}
Script:
$("input").on('keyup change click', function () {
var v = $(this).val();
if (v) {
$("#whatever").text(v);
}
else {
$("#whatever").text('<whatever>');
}
});

I recommending using monitorEvents. It's a function provide by the javascript console in both web inspector and firebug that prints out all events that are generated by an element. Here's an example of how you'd use it:
monitorEvents($("input")[0]);
In your case, both Firefox and Opera generate an input event when the user selects an item from the autocomplete drop down. In IE7-8 a change event is produced after the user changes focus. The latest Chrome does generate a similar event.
A detailed browser compatibility chart can be found here:
https://developer.mozilla.org/en-US/docs/Web/Events/input

Here is an awesome solution.
$('html').bind('input', function() {
alert('test');
});
I tested with Chrome and Firefox and it will also work for other browsers.
I have tried a lot of events with many elements but only this is triggered when you select from autocomplete.
Hope it will save some one's time.

Add "blur". works in all browsers!
$("input").on('blur keyup change click', function () {

As Xavi explained, there's no a solution 100% cross-browser for that, so I created a trick on my own for that (5 steps to go on):
1. I need a couple of new arrays:
window.timeouts = new Array();
window.memo_values = new Array();
2. on focus on the input text I want to trigger (in your case "email", in my example "name") I set an Interval, for example using jQuery (not needed thought):
jQuery('#name').focus(function ()
{
var id = jQuery(this).attr('id');
window.timeouts[id] = setInterval('onChangeValue.call(document.getElementById("'+ id +'"), doSomething)', 500);
});
3. on blur I remove the interval: (always using jQuery not needed thought), and I verify if the value changed
jQuery('#name').blur(function ()
{
var id = jQuery(this).attr('id');
onChangeValue.call(document.getElementById(id), doSomething);
clearInterval(window.timeouts[id]);
delete window.timeouts[id];
});
4. Now, the main function which check changes is the following
function onChangeValue(callback)
{
if (window.memo_values[this.id] != this.value)
{
window.memo_values[this.id] = this.value;
if (callback instanceof Function)
{
callback.call(this);
}
else
{
eval( callback );
}
}
}
Important note: you can use "this" inside the above function, referring to your triggered input HTML element. An id must be specified in order to that function to work, and you can pass a function, or a function name or a string of command as a callback.
5. Finally you can do something when the input value is changed, even when a value is selected from a autocomplete dropdown list
function doSomething()
{
alert('got you! '+this.value);
}
Important note: again you use "this" inside the above function referring to the your triggered input HTML element.
WORKING FIDDLE!!!
I know it sounds complicated, but it isn't.
I prepared a working fiddle for you, the input to change is named "name" so if you ever entered your name in an online form you might have an autocomplete dropdown list of your browser to test.

Detecting autocomplete on form input with jQuery OR JAVASCRIPT
Using: Event input. To select (input or textarea) value suggestions
FOR EXAMPLE FOR JQUERY:
$(input).on('input', function() {
alert("Number selected ");
});
FOR EXAMPLE FOR JAVASCRIPT:
<input type="text" onInput="affiche(document.getElementById('something').text)" name="Somthing" />
This start ajax query ...

The only sure way is to use an interval.
Luca's answer is too complicated for me, so I created my own short version which hopefully will help someone (maybe even me from the future):
$input.on( 'focus', function(){
var intervalDuration = 1000, // ms
interval = setInterval( function(){
// do your tests here
// ..................
// when element loses focus, we stop checking:
if( ! $input.is( ':focus' ) ) clearInterval( interval );
}, intervalDuration );
} );
Tested on Chrome, Mozilla and even IE.

I've realised via monitorEvents that at least in Chrome the keyup event is fired before the autocomplete input event. On a normal keyboard input the sequence is keydown input keyup, so after the input.
What i did is then:
let myFun = ()=>{ ..do Something };
input.addEventListener('change', myFun );
//fallback in case change is not fired on autocomplete
let _k = null;
input.addEventListener( 'keydown', (e)=>_k=e.type );
input.addEventListener( 'keyup', (e)=>_k=e.type );
input.addEventListener( 'input', (e)=>{ if(_k === 'keyup') myFun();})
Needs to be checked with other browser, but that might be a way without intervals.

I don't think you need an event for this: this happens only once, and there is no good browser-wide support for this, as shown by #xavi 's answer.
Just add a function after loading the body that checks the fields once for any changes in the default value, or if it's just a matter of copying a certain value to another place, just copy it to make sure it is initialized properly.