Question

I need some guidance/advices from someone who has any ideea about custom jquery event.
From a html select I tried to create a “combobox” in which user can type a text and options list would be filtered by that typed text.
That way, html code for an select like

<select name="foo_select" id="foo_id">
    <option value="foo_option_value_1">foo_option_text_1</option>
    <option value="foo_option_value_2">foo_option_text_2</option>
    <option value="foo_option_value_3">foo_option_text_3</option>
</select>

would be replaced with

<div class="combo_container" id="foo_select_container" style="position:relative">
    <input type="text" class="combo_text" />
    <input type="hidden" name="foo_select" id="foo_id" />
    <div class="combo_arrow">
    <ul style="position:absolute;">
        <li id="foo_option_value_1">foo_option_text_1</li>
        <li id="foo_option_value_2">foo_option_text_2</li>
        <li id="foo_option_value_3">foo_option_text_3</li>
    </ul>
</div>

So when the user select’s a certain “option” from new created “combobox” in the input with class “combo_text” option’s text is inserted, and in the hidden input option’s id is inserted.

Now, all I need to do is to know when user select’s an option. Basically what I need to do is to create the equivalent of jQuery( ‘#foo_id’ ).change( function(){ do_someting } ); for my newly created combobox, but I have no ideea where to start.

If someone has any ideea I would apreciate.

---

Update.

I mention that I have tried to keep as much as I could the behavior of the html select. The combo box has functionalities like: on up/down arrows on focused combo.text the user can select a value, and on enter that value is changed, calling the function Select() or on escape nothing chages – even if user has selected other values using up/down arrows.

So I think I need to do something like.. when hidden input $( ‘#foo_id’ ) is changed do someting, so I need to find out when this input’s value is changed.

---

Thanks..

Answer 1

So I have managed to find a solution and I posted maybe will help someone, and it goes like this:

On hidden input I attached new event called cmbchange

jQuery( '#foo_id' ).bind( 'cmbchange', function(){
     __do_something__
})

And in function Select() I have triggerd that event

jQuery( '#foo_id' ).trigger( 'cmbchange' );

Pretty simple if you think about it. Great thing that jQuery.
Anyway thanks for the help.