This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Entering a value in a text box by selecting from a floating, hiding drop-down list Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Entering a value in a text box by selecting from a floating, hiding drop-down list" Watch "Entering a value in a text box by selecting from a floating, hiding drop-down list" New topic
Author

Entering a value in a text box by selecting from a floating, hiding drop-down list

Wally Hartshorn
Ranch Hand

Joined: Jan 30, 2003
Posts: 77
Here is a bit of functionality that I would like to have in a form that I am developing:
  • The user clicks in or tabs to the first Code field, a 3-character text box.
  • A drop-down list appears next to the first Code field, floating above the other fields on the form. The drop-down list contains account names.
  • The user selects an account.
  • The 3-character account code is automatically entered in the first Code field, then the drop-down list disappears.
  • The user goes to the second Code field.
  • The drop-down list appears floating next to the second Code field.
  • After the user selects an account name, the 3-character account code is automatically entered in the second code field and the drop-down list disappears.
  • etc.
  • Is there a name for such a "disappearing drop-down list that enters a value in a small text box"? More importantly, is there some free JavaScript code out there that will do what I want, or at least something close to it?


    Wally Hartshorn
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60817
        
      65

    The Scriptaculous Autocompleter.Local sounds close to what you want.

    If you want to get the values dynamically from the server, there's also the Ajax.Autocompleter.

    Warning: documentation on these controls is less than stellar but they're pretty easy to use and may work out for you.
    [ August 17, 2006: Message edited by: Bear Bibeault ]

    [Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
    Wally Hartshorn
    Ranch Hand

    Joined: Jan 30, 2003
    Posts: 77
    Originally posted by Bear Bibeault:
    The Scriptaculous Autocompleter.Local sounds close to what you want.


    At first glance that doesn't seem like that will really do what I want (unless there is some functionality that wasn't apparent in the demo). The Scriptaculous Autocompleter requires that the user start typing something and then they are shown options that match what they've typed. When they select an option, it is entered into the text box.

    The situation that I'm dealing with is one in which each option can be rather long (e.g. 25 characters) but there is only room on the form for a short value (3 characters). Also, the user doesn't necessarily know what the options are, so they need to see the options as soon as the text box gets focus.

    I'll look at the Scriptaculous Autocompleter to see whether it can be easily modified to do what I want, but I'm still hoping to see something out there that is closer.
    Eric Pascarello
    author
    Rancher

    Joined: Nov 08, 2001
    Posts: 15376
        
        6
    You are lucky I am in a good mood today, I normally do not do this (UNTESTED CODE BELOW):



    Eric
    Wally Hartshorn
    Ranch Hand

    Joined: Jan 30, 2003
    Posts: 77
    Originally posted by Eric Pascarello:
    You are lucky I am in a good mood today, I normally do not do this (UNTESTED CODE BELOW):


    Well I must be extremely lucky because I just tested your untested code and it works like a charm! Even on IE6! Sweet!

    Thanks very much, Eric! You've made my day!
    Ram Gokul
    Ranch Hand

    Joined: Oct 07, 2005
    Posts: 85
    I copied the code into a file => a.html and opened it in IE 6.0 . It does not work . I dont see any list value.( I dont need the code but I am learning Javascript and I thought it might be useful ). Any ideas ?

    Thanks
    Eric Pascarello
    author
    Rancher

    Joined: Nov 08, 2001
    Posts: 15376
        
        6
    Make sure that the code is properly formatted. The UBB code tags really screw it up when you copy and paste. You may have extra line breaks and such.

    I put the code on my site here: http://www.pascarello.com/examples/ddlMove.html

    Eric
    Ram Gokul
    Ranch Hand

    Joined: Oct 07, 2005
    Posts: 85
    Thanks Eric . I will try it out .
    Fanny Castillo
    Greenhorn

    Joined: Jul 06, 2012
    Posts: 1
    Thanks, it help me a lot. You are real genius
     
    It is sorta covered in the JavaRanch Style Guide.
     
    subject: Entering a value in a text box by selecting from a floating, hiding drop-down list
     
    Similar Threads
    Query in Action Form
    Dropdown values for JSP
    javascript onload question
    Populating dropdown box
    transfer data from text box to multiple select list box.