Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Type in drop down menu in for Coldfusion

Posted on 2007-11-21
4
Medium Priority
?
706 Views
Last Modified: 2008-02-01
How can I create a typable dropdown menu in coldfusion.

I want to have the dropdown menu pull data from a query but also have the abliltiy to free type in something new.

How can I do this?

Thanks,
0
Comment
Question by:dunersbsquad
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 52

Expert Comment

by:_agx_
ID: 20331945
Afaik its not possible with plain CF.  One option is to simulate it with javascript.  You could provide a text box and a button. When the button is clicked it adds the text to the select list.  

I've never used them, but if you look around there are some interesting scripts for "editable" select lists out there.

http://www.javascriptkit.com/script/script2/editableselect.shtml
http://www.dhtmlgoodies.com/index.html?whichScript=form_widget_editable_select
<script>
   function addOption() {
      var theList = document.getElementById('yourList');
      var newEntry = document.getElementById('newText').value;
      // may also want to look for duplicates and trim values
      if (newEntry.length > 0) {
	     // new Option( theListText, theListValue);
         theList.options[theList.options.length] = new Option(newEntry, newEntry);
         //auto-select new option
         theList.options[theList.options.length-1].selected = true;
      }
   }
</script>
<form>
   <select id="yourList" name="yourList">
      <option value="option 1">option 1</option>
      <option value="option 2">option 2</option>
      <option value="option 3">option 3</option>
   </select>
   <input type="text" id="newText" name="newText" size="10">
   <input type="button" value="Add" onClick="addOption();">
</form>

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
ID: 20331963
You might also try the suggestion here.   Seems to work with Firefox/Opera/IE6. Visually it looks almost like an editable control.

http://www.faqts.com/knowledge_base/view.phtml/aid/8220
Starting with "A simpler alternative goes like this: ..."
0
 
LVL 5

Accepted Solution

by:
mrigsby earned 2000 total points
ID: 20332140
You could also use Ajax. The easiest way would by utilizing MXAjax. You can find it and documentation here... http://www.mxajax.com. Here is an example of the Auto Complete... http://www.indiankey.com/mxajax/examples/mxAutocomplete1.cfm
0
 
LVL 14

Expert Comment

by:Scott Bennett
ID: 20340696
If you have ColdFusion 8 you can use the autosuggest feature of the cfinput tag, it is not a drop down, of course that doesn't have the drop down feature so that may not be what you want:

<cfform>
Fruit: <cfinput type="text" name="fruit" autosuggest="apple,banana,orange,pear">
</cfform>

You can see a sample of what that would look like here:

http://www.coldfusionguy.com/ColdFusion/Samples/autosuggest.cfm

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

The technique is by far very Simple! How we can export the ColdFusion query results to DOC file?  Well before writing this I researched a lot in Internet but did not found a good Answer anyways!  So i thought now i should share my small snippet w…
Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

719 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