Content of element doesn't refresh after onBlur action

Question

I try to edit content of an select input when text entered to a textbox by using jQuery. This is my TextBox

<input id="id_subsector_selector" type="text" maxlength="100" name="subsector_selector" onblur="onSubSectorSelectorChange(this);"/>

and this is my multiple selectbox

<select id="id_subsector" name="subsector" multiple="multiple"> <option value="14">Yazılımevi </option> </select>

This is my javascript function(I know this is trivial)

function onSubSectorSelectorChange(item) {
    $('select#id_subsector').html("");
}

The question is when I enter a character to the textbox, althought onSubSectorSelectorChange function is triggered, selectbox content doesn't change until I click on somewhere on page or press tab button.

The problem may be the trigger action which is "onBlur" but I couldn't find a proper function. I am waiting for any comment or solution!

Thanks

What do you actually want it to do? Change the value of the select every time the user types a character? If so you want the keyup event. If you're using jquery I would setup the events using that rather than attributes. — Richard Dalton, May 23 '11 at 14:05

score 2 · Accepted Answer · answered May 23 '11 at 14:05

2

blur is triggered when the element loses focus. What you are after is the keyup event:

http://api.jquery.com/keyup/

answered May 23 '11 at 14:05

BonyT

10,750
5
31
52

This is definetely what I am looking for. Thank you! – brsbilgic May 23 '11 at 14:41

score 1 · Answer 2 · answered May 23 '11 at 14:07

1

If you want execute the method onSubSectorSelectorChange on keydown, you need use attribute onkeydown instead. The onblur will work only if you change focus.

Take a look about onkeydown, onkeypress and onkeyup attributes.

answered May 23 '11 at 14:07

David Rodrigues

12,041
16
62
90

score 1 · Answer 3 · answered May 23 '11 at 14:08

Get rid of the onblur attribute althogether, and late-bind in document.ready() event to the keyup event:

$(document).ready(function(){
    $("#id_subsector").keyup(function(){
        onSubSectorSelectorChange(this);
    });
});

Or even more concisely:

$(document).ready(function(){
    $("#id_subsector").keyup(function(){
        $(this).html("");
    });
});

Content of element doesn't refresh after onBlur action

3 Answers3