?
Solved

Editable drop down

Posted on 2004-09-27
12
Medium Priority
?
1,025 Views
Last Modified: 2012-06-21
I have created a page where i have a drop down with a list of companies. If the user picks a company and clicks on save, that entry gets saved to an Access DB. Now what if I wanted to edit this drop down such that the user should be able to type into that box and the entries would be reduced depending on the letters typed in by the users. The user should also be able to save this new entry. How do i do this??
0
Comment
Question by:KalluMama
[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
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 31

Expert Comment

by:alorentz
ID: 12160185
This is a Javascript question and may be better suited in that area.  However, I don't think that ability is available via a dropdown list or box.  Only in VB, not ASP or HTML.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 12160395
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 12160431
0
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.

 
LVL 31

Expert Comment

by:alorentz
ID: 12160466
Guess I should be clearer about my point..."I don't think that ability is available via a 'STANDARD' dropdown list or box" ;-)  

FTB's custom examples should work accordingly...
0
 

Author Comment

by:KalluMama
ID: 12160476
...but none of these show the drop down options as the user types...is that not possible??
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 12160514
Oh, you are looking for a searchable select list? Try this:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function findOption(strText,strOption){
      objForm = document.forms[0];
      objSelect = objForm.elements[strOption];
      intStringLength = strText.length;
      for(i=0;i<objSelect.length;i++){
            strDisplayText = objSelect.options[i].text.substring(0,intStringLength);
            if(strDisplayText.toUpperCase() == strText.toUpperCase()){
                  objSelect.selectedIndex=i;
                  break;
            }
      }
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<INPUT type="text" id=text1 name=text1 onKeyUp="findOption(this.value,'select1')">
<SELECT id=select1 name=select1>
      <OPTION></OPTION>
      <OPTION>Adam</OPTION>
      <OPTION>Bob</OPTION>
      <OPTION>Cappy</OPTION>
      <OPTION>Charlie</OPTION>
      <OPTION>Connie</OPTION>
      <OPTION>Edward</OPTION>
</SELECT>
</FORM>

</BODY>
</HTML>

FtB
0
 
LVL 31

Expert Comment

by:alorentz
ID: 12160532
Again, that's a VB functionality....but FTB might have something up his sleeve!

Have you ever seen this on another site?  If so, just get the script off there....
0
 
LVL 31

Expert Comment

by:alorentz
ID: 12160564
FTB - I think he is looking for the dropdown to show everything and as they type for it to filter the contents.  Just like Help files in MS software...
0
 

Author Comment

by:KalluMama
ID: 12160591
alorentz,

That is exactly what i am looking for, and also allow the user to add that entry if it does not exist.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 12160621
Well, as alorentz already suggested, that functionality is not supported by the select list object. The links and the code that I gave you above show you some ways around the limitations of that object, but beyond that, I don't know that anything else is available.

FtB
0
 
LVL 31

Expert Comment

by:alorentz
ID: 12160636
Again, it's ALL Javascript.  FTB can probably hook that up for you.  What I think you need is a TEXT box, above a dropdown list.  And as they type into the textbox, the dropdown list will read the textbox and filter the results based on what is typed.

Sorry, but not something I want to code.
0
 
LVL 15

Accepted Solution

by:
Thogek earned 2000 total points
ID: 12273957
Here's another odd construction you can try.  (I think this is basiaclly an attempt to implement what alorentz describes above.)  I've only tested it in IE6, so no guarantees....


<html>

<head>
<script language="JavaScript" type="text/javascript">

// arrOptions will store an array containing all of the option objects within the select
// Will be used as master copy of option objects for re-populating select
var arrOptions = null;

// GetOptionsArray gathers all option objects within indicated select into an array
function GetOptionsArray(oSelect) {
    var o = new Array(0);
    for(var i = 0;  i < oSelect.options.length;  ++i)
        o[o.length] = oSelect.options[i];
    return o;
}

// FilterOptions filters the options within the named select to those that begin with the indicated string
function FilterOptions(oForm, strSelectName, strValue) {
    var oSelect = oForm.elements[strSelectName];
    if(oSelect) {
        if(arrOptions == null)
            arrOptions = GetOptionsArray(oSelect);

        // clear all options from select
        while(oSelect.options.length > 0)
            oSelect.options.remove(0);

        // add only those options that match the current filter string
        for(var i = 0;  i < arrOptions.length;  ++i)
            if(arrOptions[i].value.substr(0,strValue.length).toLowerCase() == strValue.toLowerCase())
                oSelect.options.add(arrOptions[i]);

        // pre-select the first option
        if(oSelect.options.length > 0)
            oSelect.options[0].selected = true;
    }
}

</script>
</head>

<body>

<form>

<input type="text" onkeyup="FilterOptions(this.form, 'sel', this.value)" /><br />
<select name="sel">
    <option value="Alpha">Alpha</option>
    <option value="Beta">Beta</option>
    <option value="Gamma">Gamma</option>
    <option value="Delta">Delta</option>
    <option value="Epsilon">Epsilon</option>
    <option value="Zeta">Zeta</option>
    <option value="Eta">Eta</option>
    <option value="Theta">Theta</option>
    <option value="Iota">Iota</option>
    <option value="Kappa">Kappa</option>
    <option value="Lambda">Lambda</option>
    <option value="Mu">Mu</option>
    <option value="Nu">Nu</option>
    <option value="Xi">Xi</option>
    <option value="Omicron">Omicron</option>
    <option value="Pi">Pi</option>
    <option value="Rho">Rho</option>
    <option value="Sigma">Sigma</option>
    <option value="Tau">Tau</option>
    <option value="Upsilon">Upsilon</option>
    <option value="Phi">Phi</option>
    <option value="Chi">Chi</option>
    <option value="Psi">Psi</option>
    <option value="Omega">Omega</option>
</select>

</form>

</body>

</html>
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:   The Exchange of informatio…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…

743 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