• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1034
  • Last Modified:

Editable drop down

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
KalluMama
Asked:
KalluMama
  • 5
  • 4
  • 2
  • +1
1 Solution
 
alorentzCommented:
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
 
fritz_the_blankCommented:
0
 
fritz_the_blankCommented:
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
alorentzCommented:
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
 
KalluMamaAuthor Commented:
...but none of these show the drop down options as the user types...is that not possible??
0
 
fritz_the_blankCommented:
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
 
alorentzCommented:
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
 
alorentzCommented:
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
 
KalluMamaAuthor Commented:
alorentz,

That is exactly what i am looking for, and also allow the user to add that entry if it does not exist.
0
 
fritz_the_blankCommented:
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
 
alorentzCommented:
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
 
ThogekCommented:
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
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now