Jquery Chosen focus on page load (onLoad?)

Question

I\'m using the Jquery Chosen plugin on a select box, however I\'d like to focus this on page load. I\'ve used the following code to focus a text input:

onLoa         


        

Answer 1

I have been searching into StackOverflow for this solution to use in one of my project. After searching a lot I have learned something but have got no proper solution. Finally I have fixed my problem as follows:

I am using "jquery-1.10.2.min.js" and "Chosen v1.0.0". In my code I have <select id="sel_product"> and in jquery $("#sel_product").chosen(). For adding focus I have added '_chosen' after my ID of the element and call the following function:

$('#sel_product_chosen a.chosen-single').focus();

My final code is:

$(document).ready(function(){
    $("#sel_product").chosen();
    $('#sel_product_chosen a.chosen-single').focus();
});

Now it's working perfectly.

Answer 2

This worked for me:

$("select.ProductIDDropDown").chosen();
$("select.ProductIDDropDown").trigger("liszt:activate");

or shorten it to

$("select.ProductIDDropDown").chosen().trigger("liszt:activate");

Answer 3

<select id="myselect">
    <option value="1">abc</option>
    <option value="2">def</option>
    <option value="3">ghi</option>
</select>

...

      $("#myselect_chzn").children('.chzn-drop').children('.chzn-search').children('input[type="text"]').focus();
      $("#myselect_chzn").addClass('chzn-container-active');

Chosen creates owns divs and converts your "select_ID" into "select_ID_chzn" for those divs

Answer 4

I know this is an old post... but for what it's worth the following is an option as well...

  $('select').chosen().on('chosen:showing_dropdown', function () {
        //do something
    })

Answer 5

this is what worked for me

jQuery("#fltrPerson_chzn a").addClass("chzn-single-with-drop");
                        jQuery(".chzn-drop").css({
                            "left": "0px",
                            "top": "24px"
                        });

Answer 6

If your using the first example (standard select box) you can use:

jQuery(document).ready(function($) {
    $('.chzn-drop .chzn-search input[type="text"]').focus();
})