jQuery focus not working with the plugin chosen [duplicate]

Question

Possible Duplicate:
Jquery Chosen focus on page load (onLoad?)

i am using a jQuery plugin chosen (http://harvesthq.github.com/chosen/) to create more useful select boxes.

however, jQuery focus event is not working with this plugin.

my html code:

<select class="product">
<option value="1">Product One</option>
<option value="2">Product Two</option>
</select>

and javascript code:

$('.product').chosen().focus();

it is not focusing the element..

here is my jsFiddle: http://jsfiddle.net/JigneshManek/queZ6/11/

is there any other method or event specified in the plugin to focus the element?

Answer 1

This library looks nice, but it doesn't seem to let you interface with it beyond setting the initial parameters.

Still, try this:

$('.chzn-single').focus(function(e){
    e.preventDefault();
});
$('button').click(function() {
    $('.chzn-single').focus();
});

What happens is the $('.chzn-single'), which is an a element, gets focused via tabbing, Chosen listens to that event and triggers the activation of the field and focuses the container. I needed to add preventDefault on click events in order to keep the focus on the container.

In any case, it seems to work.

Answer 2

Following seems to work for me:

$('.chzn-container').mousedown();

Answer 3

the issue is that your original select box isn't there anymore, and has been replaced by a <div> and some <ul>s, so the standard browser behavior focus on an input control is no longer relevant. You will need to look at the library, and see how to capture keydown events to create a virtual focus. if you are lucky the library authors thought of this, and have provided some hooks for you.