CodeCharge Studio
search Register Login  

Web Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 JavaScript DHTML COMBOBOX: Turn a Select listbox and a Input textbox into a Combo box dropdown

Print topic Send  topic

Author Message
Michael Mikkelsen
Posted: 08/08/2005, 9:04 AM

I have only tested this in IE6.0 but it should be able to work in other browers that support JavaScript and DHTML.

1. Copy the script between your <head>er </head>

2. Add this to your <body> tag:
onclick="document.getElementById('selectInput').style.display='none'"
Change selectInput to the name of your select tag.

3. Add this to your <input> tag:
AUTOCOMPLETE="OFF" ONKEYDOWN="return combotext_onkeyup(event, this, this.form.selectInput)">
Change selectInput to the name of your select tag.

4. Add this to your <select> tag:
SIZE=8
STYLE="display:none; position:absolute; top:20px; left:0px"
ONBLUR="this.style.display='none'"
ONCHANGE="comboselect_onchange(this, this.form.textInput)"
ONKEYUP="comboselect_onkeyup(event.keyCode, this, this.form.textInput)">
Change textInput to the name of your input tag.

  
<SCRIPT>  
<!--  
  
function combotext_onkeydown(e,oText,oSelect){  
  
  keyCode = e.keyCode;  
  
  if (keyCode == 40 || keyCode == 38) {  
    oSelect.style.display = 'block';  
    oSelect.focus();  
    comboselect_onchange(oSelect, oText);  
  }  
  else if (keyCode == 13) {  
    e.cancelBubble = true;  
    if (e.returnValue) e.returnValue = false;  
    if (e.stopPropagation) e.stopPropagation();  
    comboselect_onchange(oSelect, oText);  
    oSelect.style.display='none';  
    oText.focus();  
    return false;  
  }  
  else if(keyCode == 9) return true;  
  else { //alert(keyCode);  
  
    oSelect.style.display = 'block';  
  
    var c = String.fromCharCode(keyCode);  
    c = c.toUpperCase();   
    toFind = oText.value.toUpperCase() + c;  
  
    for (i=0; i < oSelect.options.length; i++){  
       nextOptionText = oSelect.options.text.toUpperCase();  
  
        if(toFind == nextOptionText){  
            oSelect.selectedIndex = i;  
            break;  
        }  
  
        if(i < oSelect.options.length-1){  
           lookAheadOptionText = oSelect.options[i+1].text.toUpperCase() ;  
           if( (toFind > nextOptionText) &&   
              (toFind < lookAheadOptionText) ){  
              oSelect.selectedIndex = i+1;  
              break;  
           }  
         }  
         else {  
           if(toFind > nextOptionText){  
               oSelect.selectedIndex = oSelect.options.length-1; // stick it at the end  
               break;  
           }  
       }  
    }  
  }  
}  
  
  
function comboselect_onchange(oSelect,oText) {  
  if(oSelect.selectedIndex != -1)  
    oText.value = oSelect.options[oSelect.selectedIndex].text;  
}  
  
function comboselect_onkeyup(keyCode,oSelect,oText){  
  if (keyCode == 13) {  
    comboselect_onchange(oSelect, oText);  
    oSelect.style.display='none';  
    oText.focus();  
  }  
}  
  
// -->  
</SCRIPT>  
<body onclick="document.getElementById('selectInput').style.display='none'">  
  <FORM name=form1>  
      <DIV STYLE="position:relative">  
      <INPUT TYPE="text"   
             NAME=textInput   
             SIZE=18   
             AUTOCOMPLETE="OFF"  
             ONKEYDOWN="combotext_onkeydown(event, this, this.form.selectInput)">  
      <SELECT NAME=selectInput  
             SIZE=8   
             STYLE="display:none; position:absolute; top:20px; left:0px"   
             ONBLUR="this.style.display='none'"  
             ONCHANGE="comboselect_onchange(this, this.form.textInput)"  
             ONKEYUP="comboselect_onkeyup(event.keyCode, this, this.form.textInput)">  
        <OPTION VALUE="Kansas City">Kansas City</OPTION>  
        <OPTION VALUE="Overland Park">Overland Park</OPTION>  
        <OPTION VALUE="St. Louis">St. Louis</OPTION>  
      </SELECT>  
      <DIV>  
  </FORM>  
<BODY>  
ravisrinivas
Posted: 09/19/2005, 10:32 PM

:-) Nice Boss code is excellant.
shivkumar galag
Posted: 10/15/2005, 12:21 AM

This is too good.
I want two comboboxes say, each combo boxes having no.s ,if we select one combo box no. , that selected no should not show in other combo box.
If anybody knows pz post
shivkumar galag
Posted: 10/15/2005, 12:24 AM

Quote shivkumar galag:
This is too good.
I want two comboboxes say, each combo boxes having no.s ,if we select one combo box no. , that selected no. should not show/appear in the other combo box.
If anybody knows plz post.
prasad
Posted: 10/26/2005, 12:33 AM

This is too good for me.
prasd dls
Posted: 10/26/2005, 12:36 AM

Quote prasad:
This is too good for me.
I will change this to : when i press letters, depending on these letters the list box item will be selected , when i click on that item in the list box that item will go and place into the text box

ranjan
Posted: 11/15/2005, 12:03 PM

Quote :
prasad DLS

Yes please....have you got such an example? I too want to be able to

a) type into textbox which automatically selects a listbox item
b) select a listbox item which appears in the textbox.

AND only one to be visible at any point in time. for example the Textbox is visible but just the corner of the listbox is visible next to it. Is this possible with the above code ? (the positioning of the items overlap - ie the textbox and the string part of the listbox - get my meaning?!)

many thanks to you all.

I work with c#/asp and javascript is not my strength... hence I am asking for your help.

thanks
MIKE MIKE
Posted: 12/29/2005, 8:16 AM

i have this code
<SELECT name="genReport">
<OPTION value="1">All Creditors</OPTION>
<OPTION value="2">30 Day Creditors</OPTION>
<OPTION value="3">60 Day Creditors</OPTION>
<OPTION value="4">90 Day Creditors</OPTION>
<OPTION value="5">Above 90 Day Creditors</OPTION>
</SELECT>

Now when displaying the report i'd like the title to change depending on what the user selected, without having to write so many lines of code.
by having a variable that obtains the text(e.g All Creditors etc) . i tried

'report_description is a variable
report_description = Request.Form("report_description").....

<input type="hidden" name="report_description" id="report_description">


<script lanuage="Javascript">
//assign the variable the textual value e.g All Creditors etc
frm.report_description=frm.genReport.options[frm.genReport.selectedindex].text;
</script>........

'Now to display the title

<td width="10%" nowrap><b><font face="Arial" size="4"><b>
<%= report_description%>

BUT IT"S NOT WORKING HEEEEELP


sudha
Posted: 01/06/2006, 2:32 AM

Hi,
Could anyone help me with this one plz.
I have two select boxes and 2 buttons "ADD" and "REMOVE". I need to transfer from left box to right. when I select an option in left box, ADD button should get enabled and on adding and then tab out, focus should now be on the other select box.And on selecting an option REMOVE button should get enabled and ADD disabled.
My problem is that there are many events to be handled - onclick, onfocus and onkeydown.When i click on empty space in the right box, first option should be selected and remove button should be enabled.
Please reply asap if u know how to handle this.
san
Posted: 01/31/2006, 11:31 PM

can you tell me that how can i choose an option in a combobox coresponding to the values of other combobox
Walter Kempees
Posted: 02/01/2006, 1:50 AM

search the php forum for
"dependant listboxes" or "Sixto"
If registered CCS user, example pack2 has a 3 listbox example.
or use this http://www.consultair.nl/newsite/go.php?m=rbk&t=shw&rbk_id=43

"san" <san@forum.codecharge> schreef in bericht
news:2543e063c8a1881@news.codecharge.com...
> can you tell me that how can i choose an option in a combobox coresponding
> to
> the values of other combobox
> ---------------------------------------
> Sent from YesSoftware forum
> http://forums.codecharge.com/
>

Kaustav
Posted: 03/13/2006, 12:47 AM

I am using combobox and made it working as a listbox(multiple).
i want to get all the list data i selected.
how to get that?
arun
Posted: 03/28/2006, 5:11 AM

My query is different iam having three txtboxes and i want to change the value of selectected textboxes

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

PHP Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright © 2003-2004 by UltraApps.com  and YesSoftware, Inc.