开发者

onBlur event overriding jQuery UI events

I have a textbox that is wired up using jQuery UI 1.8.4 autocomplete. I have the select event wired up so when the user chooses an item from the list it calls another JavaScript function that issues an ajax request to save the data and update an XML document.

On the same textbox there is an onBlur event so that if the user manually types t开发者_如何学JAVAhe data in and tabs off the textbox without choosing an autocomplete item it also performs the update.

When the user selects an item from the autocomplete list it causes onBlur to fire which overrides the select event, thus the only data that gets updated is whatever is in the textbox that the user typed, and since the select event doesn't fire the contents of the textbox don't get updated.

I've tried using the change event with the same results.

Is there a way to ensure the select event gets fired and also implement some functionality that will emulate an onBlur in the case where a user types the value in rather than selecting it?


The problem is when the user interacts with the autocomplete menu, the textbox loses focus and the blur event fires. There is no way to really detect if the user is in the autocomplete control unless the component tells you that.

If the autocomplete control you are using does not have methods to tell you when it is closed, than you are probably stuck with using a setTimeout to wait a bit before you fire your code.


I think The onselect is always fired "BUT" its fired only after onblur event of the textbox.

And this happens only when you use the mouse to select the autocomplete item and not through selecting the item by keyboard.

You may undo the update made on onblur with the select event depending on wether mouse click or keyboard select is made.

select: function (event, ui) {

     if (event.originalEvent.originalEvent.type == 'click') {
          //undo the onblur event happened by an ajax call here
          //$("#txtbox").val() will still be available to do an undo
     }

     //do the actual onselect function here
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜