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);
});

Search box not showing post list

I'm hoping you can help me with an issue that I can't solve.
When I updated wordpress to the latest version, select2 lost the functionality to show the latest posts.
The above image is the example of what is happening. Instead it should search and show a list of the last posts by default, without the need to write anything.
The javascript code that we built to circumvent the situation should correct this behaviour, but the trigger is not working properly and only works when a key is pressed inside the box.
Question: Has anyone ever had this problem?
$(document).ready(function () {
var select2_open;
// open select2 dropdown on focus
$(document).on('focus', '.select2-selection--single', function (e) {
select2_open = $(this).parent().parent().siblings('select');
$('.select2-search__field').val(' ');
// trigger keydown event, currently not working
$('.select2-search__field').trigger('keyup.search');
});
});

How to detect if item is selected in Google Maps API autocomplete list?

I'm trying to achieve the following behavior.
When using Google Maps API's autocomplete, clicking with the mouse on an element in the list or pressing enter will select the desired element and fill in the input with necessary values. However, if you press enter while focus is still in the input element itself, nothing happens, so it's necessary to somehow solve that.
I have decided to solve that problem by selecting the first item from the autocomplete list:
$("#autocomplete").keypress(function(e){
if(e.which == 13) {
select-first-item();
}
});
It works well, but the problem is that it will select the first item even if you use the down arrow on the keyboard, browse the autocomplete list and then press enter while e. g. 4th result is selected.
How to solve this? I have tried with :focus, but it doesn't seem very reliable. Sometimes it selected the first result, sometimes it selected the focused item from the list.
Google Maps adds class pac-item-selected to the item selected in the list, so my last try was based on checking for length.
$("#autocomplete").keypress(function(e){
if ( $( ".pac-item-selected" ).length ) {
if(e.which == 13) {
select-first-item();
}
}
}
However, as soon as you press anything, the class goes away and checking for length doesn't work. If I use event.preventDefault, the whole functionalitiy doesn't work, since autocomplete is obviously based on keypress/keydown/... events.
I couldn't make Maps work in my fiddle properly, so I have adapted an old fiddle: http://jsfiddle.net/pbbhH/1222/
Is there any solution for this?

using place_changed event of autocomplete you can check place has been changed:
var input_source = document.getElementById('input_source');
var autocomplete = new google.maps.places.Autocomplete(input_source);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
// process
});

In addition to #dhara-paramar solution:
Just wanted to add new shorter version according to Google Maps Api Documantation:
var input_source = document.getElementById('input_source');
var autocomplete = new google.maps.places.Autocomplete(input_source);
autocomplete.addListener('place_changed', fillInAddress);
function fillInAddress() {
//your process here
};

Submit form upon selection of browser autocompletion (not custom autocompletion)

The body of my HTML looks like this:
<body>
<form action='http://www.example.com' method='GET'>
<input type='text' id="text_input"/>
</form>
</body>
After entering a couple values into the field and returning to the site, a user is given autocompletion suggestion from the browser. When you select one, how can I have the form automatically submit?
In this question, they show something similar in jQuery:
$("#text_input").autocomplete({
source: ['apple', 'banana'],
minLength: 2,
select: function(event, ui) {
$("#text_input").val(ui.item.value);
$("#text_input").closest('form').submit(); }
});
However, this uses custom autocompletion suggestions, and not the browsers saved results.

Browser auto-completion isn't generally detectable using JS, from the scripts perspective, it will just appear that the user entered some data.
I think the best thing to do would be re-consider your approach to the problem, however if you defiantly want to do it this way:
The closest thing I can think of to what you're after would be to listen for key presses and changes, and a change that occurs with no key presses can be considered an auto-completion.
e.g.
$(document).ready(function(){
var keyPressed = false;
$("#test").on("keydown", function(){
keyPressed = true;
});
$("#test").on("change", function(){
if(!keyPressed){
alert("Submit");
}
});
});
Example: https://jsfiddle.net/o60nf4s6/
Issues:
Also triggered by pasting using the right click context menu
change event is only fired after the input field loses focus
Any keypress in the input will stop it from submitting, even if auto complete us used. This will only work if the whole input is filled from the browser options.

How to deslect highlighted text in textbox if already highlighted?

So I have this very simple JS function that selects all the text in the ASP.NET texbox (input):
function selectAllText(textbox) {
textbox.focus();
textbox.select();
}
..and it gets called like this on the click event:
$("#<%=Textbox1.ClientID %>").click(function () { selectAllText(jQuery(this)) });
The problem is no matter how many times a user clicks in the text box all of the text is always selected. I understand why this is occuring (based on the way my code above is), but it doesn't work well when the user tries to click in the middle of a word to get the cursor back to make a modification to the text.
How do I modify this JS to tell if the text is already highlighted and then deselect the text? This was on subsiquient click, the user can get the single cursor on a precise clicked location to make a modification.
I am trying to get the documentation on the .select() method to see if I could do if(!textbox.select()), but I am having a hard time finding it, so post any doc links as well if you have them.
EDIT: This problem and need for a workaround seems to be for IE (I am using IE9). In Chrome the behavior by default is what I need, but this is for an intranet application that runs on IE, so it appears I need an explicit workaround.
Thanks!

Is it necessary to do the .focus() in this function? You could instead attach a simple .select(); to the onfocus event (.bind('focus', function(){..})): http://jsfiddle.net/EGHzj/

Try this
$(document).ready(function(){
$('input').bind('click',function(){
if($(this).hasClass('selected')){
$(this).toggleClass('selected');
}else{
this.focus();
this.select();
$(this).toggleClass('selected');
}
});
});
This should work in IE also,
http://jsfiddle.net/rAqgw/7/

function selectAllText(textbox) {
// if there isn't selected text.
if (textbox[0].selectionEnd) {
textbox.focus();
textbox.select();
}
}
$('#txt').click(function() {
selectAllText($(this));
});
Live DEMO
​