Solved

Editable drop down

Posted on 2004-09-27
12
1,023 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 500 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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
Hello, all! I just recently started using Microsoft's IIS 7.5 within Windows 7, as I just downloaded and installed the 90 day trial of Windows 7. (Got to love Microsoft for allowing 90 days) The main reason for downloading and testing Windows 7 is t…
Come and listen to Percona CEO Peter Zaitsev discuss what’s new in Percona open source software, including Percona Server for MySQL (https://www.percona.com/software/mysql-database/percona-server) and MongoDB (https://www.percona.com/software/mongo-…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …

717 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