• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • paul wheaton
  • Jeanne Boyarsky
  • Ron McLeod
Sheriffs:
  • Paul Clapham
  • Liutauras Vilda
  • Devaka Cooray
Saloon Keepers:
  • Tim Holloway
  • Roland Mueller
Bartenders:

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

 
Ranch Hand
Posts: 77
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
     
    Sheriff
    Posts: 67753
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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 ]
     
    Wally Hartshorn
    Ranch Hand
    Posts: 77
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    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.
     
    author
    Posts: 15385
    6
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    You are lucky I am in a good mood today, I normally do not do this (UNTESTED CODE BELOW):



    Eric
     
    Wally Hartshorn
    Ranch Hand
    Posts: 77
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    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!
     
    Ranch Hand
    Posts: 85
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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
    Posts: 15385
    6
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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
    Posts: 85
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Thanks Eric . I will try it out .
     
    Greenhorn
    Posts: 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Thanks, it help me a lot. You are real genius
     
    Not so fast naughty spawn! I want you to know about
    Smokeless wood heat with a rocket mass heater
    https://woodheat.net
    reply
      Bookmark Topic Watch Topic
    • New Topic