Solved

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

Posted on 2010-08-16
5
231 Views
Last Modified: 2012-06-22
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.
0
Comment
Question by:pisceswzh2010
  • 4
5 Comments
 
LVL 16

Expert Comment

by:HagayMandel
ID: 33448524
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
 

Author Comment

by:pisceswzh2010
ID: 33456482
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
 

Author Comment

by:pisceswzh2010
ID: 33456592
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
 

Author Comment

by:pisceswzh2010
ID: 33456696
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
 

Accepted Solution

by:
pisceswzh2010 earned 0 total points
ID: 33456901
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Dynamic Dropdowns 15 32
Angular JS Sticky Footer Problem (when page size doesn't meet minimum) 4 29
html input 8 43
Show Ruler in Outlook 2010 STILL NOT SHOWING! 4 25
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question