Type Ahead on blur

[sudhir037]

I am facing problem with respect to type ahead functionality

I have three objects
1 -> TEXTBOX object
2 -> IMAGE object
3 -> DIV Object for DROPDOWN

Case1: when I enter any character in the TEXTBOX object. If the characters are more than one, the DIV DROPDOWN appears with the list of accounts starting with the characters entered.

Case2: If I click on the arrow IMAGE object, the DIV DROPDOWN appears with all the accounts available.

Problem we are facing.
Once the DIV DROPDOWN comes, if I click any where outside other than TEXTBOX object, IMAGE object and DIV DROPDOWN object. The DIV DROPDOWN object should close.

Solutions I tried

I used onBlur event for the TEXTBOX, it is working fine, but scroll bar in the DIV DROPDOWN doesn't work

I used onBlur event for the IMAGE, it closes the dropdown as the DIV DROPDOWN get the focus.

 

[dwarfthrower]

Try the onclick event for the document body. And set the cancelBubble property of the onclick events for the textarea, div and img to true to avoid the click being cascaded back up the tree.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps