[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2010-08-16
5
Medium Priority
?
236 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

831 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