Chosen - trigger open event after change event

Question

I am using chosen jquery plugin and would like to have an open event triggered as soon as the change event is called so that the search bar with all options would be shown.

html code

<select id="myselect" data-placeholder="Add foods you can buy here." style="height:30px;width: 100%" class="chosen-select" >
    <option value=""></option>
    {% for each in food_list %}
        <optgroup label={{each.node}}>
            {% if each.children %}
                {% for eachchild in each.children %}
                    <option>{{eachchild}}</option>
                {% endfor %}
            {% else %}
                <option>{{each.node}}</option>
            {% endif %}
        </optgroup>
    {% endfor %}
</select>

jqyery code

$( document ).ready(function() {
    $('#myselect').chosen().change(function(){
    // alert('change event called');
    $('#myselect').trigger('chosen:activate');
    $('#myselect').trigger('chosen:open');
    add_food({{profile_id}});
    });
});

Although $('#myselect').trigger('chosen:open'); opens up the search bar and options when I try on the console, but it is not working inside the change event function. Where am I wrong?

Answer 1

it was difficult to understand exactly what you were asking, as you did not include enough helpful code.

there is a fiddle i created that shows this working: http://jsfiddle.net/4VLrB/2/

are you including chosen.css and chosen.jquery.js (after you include jquery)?

<script type='text/javascript' src='jquery...'></script>
<script type='text/javascript' src='chosen.jquery.js'></script>