Improve company productivity with a Business Account.Sign Up

x
?
Solved

Editable drop down

Posted on 2004-09-27
12
Medium Priority
?
1,031 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
  • 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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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…
There is a wide range of advantages associated with the use of ASP.NET. This is why this programming framework is used to create excellent enterprise-class websites, technologies, and web applications.
If you are looking for an automated solution for backup single or multiple Office 365 user mailboxes to Outlook data file, then you can use Kernel Office 365 Backup & Restore tool. Go through the video to check out the steps to backup single or mult…
Watch the video to learn how one can deal with PST file corruption issue with an outstanding Kernel for Outlook PST Repair Tool easily. Using this tool, non-technical users can swiftly perform the repair process to restore their essential data witho…

579 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