What's the best practice to code a suggestion list for a textbox?

I'm using HTML, CSS, JavaScript and an asmx web service to write a suggestion list for a text box.  Basically when users type something in the textbox, the suggestion list will be displayed as a dropdown list right below the textbox and the content in the suggestion list will be based on user's input.

The current situation is after the suggestion list show up with some suggested items.  Users should be able to use the mouse to click the suggested item to select that item.  However, I also set an onblur event for the textbox to dismiss the suggestion list, so when users click on any other areas on the page or tab out the textbox (I suppose either action means the user is done with the textbox), the suggestion list will go away.

The problem in this case is if users want to click one of the suggested items, the onblur event will be triggered first, so the suggestion list will be dismissed first before the click event is triggered.  Is there some way to trigger the click event before the suggestion list is dismissed?

Thanks.
pisceswzh2010Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HagayMandelCommented:
instead of using onBlur to close the suggestion list, use it to run a script to check which element is actually in focus, and only after detecting the focused element, decide whether to hide the list or not.
You can use this script to check focus: http://www.ozzu.com/programming-forum/using-javascript-check-the-focus-element-t76858.html
0
pisceswzh2010Author Commented:
Thanks, HagayMandel.  I tried to iterate all the elements on the page as the way described in the page you provided.  However, JavaScript doesn't recognize "form" on my machine.  I tried to change the code using "document.forms.item.length", it returns a value of 8, but I cannot use "document.forms.item[i]" to get each item.  Any idea?  Thanks.
0
pisceswzh2010Author Commented:
I have been able to loop thru all the items using "document.forms[0].elements[i]".  Unfortunately, it still doesn't solve my problem in my case.

The default elements on my pages are quite limited in number.  It only has several div with no content in it.  I run a JavaScript subroutine to call an asmx web service which dynamically generates HTML codes based on the parameters passed to the web service and display the HTML codes in those blank div.  The loop seems doesn't work on those elements that are generated by the web service, meaning I cannot test if they are on focus.  Any idea?  Thanks.
0
pisceswzh2010Author Commented:
Another thing is even i can loop thru all the elements on my page.  There is no way I can determine if which one or ones of those elemtns I should not dismiss the suggestion box since the elements in the suggestion list are generated dynamically and their IDs are not determined...
0
pisceswzh2010Author Commented:
I've solved the problem by adding a global variable, so when the mouse over event triggered by the suggestion list div, I set the global variable as true and when the mouse out event triggered by the suggestion list div, I set the global variable as false and the suggestion list div is ONLY dismissed when the global variable is false.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.