Solved

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

Posted on 2010-08-16
5
226 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now