[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 570
  • Last Modified:

how to create editable combo box (textbox + selection) using javascript?


 Dear experts

               i wants to create editable combo-box. That is i could able to enter text as well as select items from available options (like selection). I try to get thru HTML but i couldn't.  Is this possible in javascript?. If this possible can you explain with example?

Thanks.
0
b_rajathilagam
Asked:
b_rajathilagam
  • 3
  • 3
  • 2
  • +2
1 Solution
 
b_rajathilagamAuthor Commented:

 Thanks third. This is works fine only on IE. It won't function (even combo box doesn't show up on browser) on Mozilla . I need atleast for IE,MOZILLA and Opera because of my application requirement.

Thanks.
0
 
thirdCommented:
try this PAQ,

<html>
<head>
<style>
input{
border:1px solid #666666;
font-size:9px;
font-family:verdana;
padding:0px;
margin:0px;
height:14px;
width:100px;
cursor:default;
}
input:active{
background-color:#cccccc;
}
div.tool{
display:block;
position:absolute;
top:63px;
left:205px;
width:110px;
height:66px;
overflow:auto;
font-size:9px;
font-family:arial;
background-color:#eeeeee;
border:1px solid #999999;
padding:1px;
cursor:default;
}
</style>
<script>
function MakeVisible()
{
 document.all.option1.style.visibility='visible';
 for(i=0;i<1000;i++);
 document.all.option2.style.visibility='visible';
 for(i=0;i<1000;i++);
 document.all.option3.style.visibility='visible';
 for(i=0;i<1000;i++);
 document.all.option4.style.visibility='visible';
 for(i=0;i<1000;i++);
 document.all.option5.style.visibility='visible';
 for(i=0;i<1000;i++);
}
function MakeHidden()
{
 document.all.option5.style.visibility='hidden';
 for(i=0;i<1000;i++);
 document.all.option4.style.visibility='hidden';
 for(i=0;i<1000;i++);
 document.all.option3.style.visibility='hidden';
 for(i=0;i<1000;i++);
 document.all.option2.style.visibility='hidden';
 for(i=0;i<1000;i++);
 document.all.option1.style.visibility='hidden';
 for(i=0;i<1000;i++);
}
function Select1()
{
 document.all.main.value=document.all.option1.value;
 document.all.main.focus();
 MakeHidden();
}
function Select2()
{
 document.all.main.value=document.all.option2.value;
 document.all.main.focus();
 MakeHidden();
}
function Select3()
{
 document.all.main.value=document.all.option3.value;
 document.all.main.focus();
 MakeHidden();
}
function Select4()
{
 document.all.main.value=document.all.option4.value;
 document.all.main.focus();
 MakeHidden();
}
function Select5()
{
 document.all.main.value=document.all.option5.value;
 document.all.main.focus();
 MakeHidden();
}
</script>
</head>
<body>

<input type="text" id="main" style="position:absolute; top:50px; left:100px;" onclick="MakeHidden()" ondblclick="MakeVisible()" />
<a nohref onclick="MakeVisible();" ondblclick="MakeHidden()" style="position:absolute; top:51px; left:186px;font-size:8px;font-weight:900;font-family:verdana;cursor:default;background-color:#666666;color:#eeeeee;height:13px;width:13px;text-align:center;">V</a>
<br/>

<input type="text" class="dd" id="option1" style="visibility:hidden;position:absolute; top:63px; left:100px;border-bottom-width:0px; border-top-width:1px;" value="Item 1" onclick="Select1()" readonly/>
<input type="text" class="dd" id="option2" style="visibility:hidden;position:absolute; top:76px; left:100px;border-bottom-width:0px; border-top-width:0px;" value="Item 2" onclick="Select2()" readonly/>
<input type="text" class="dd" id="option3" style="visibility:hidden;position:absolute; top:89px; left:100px;border-bottom-width:0px; border-top-width:0px;" value="Item 3" onclick="Select3()" readonly/>
<input type="text" class="dd" id="option4" style="visibility:hidden;position:absolute; top:102px; left:100px;border-bottom-width:0px; border-top-width:0px;" value="Item 4" onclick="Select4()" readonly/>
<input type="text" class="dd" id="option5" style="visibility:hidden;position:absolute; top:115px; left:100px;border-top-width:0px;" value="Item 5" onclick="Select5()" readonly/>
</body>
</html>

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20327364.html
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
ellandrdCommented:
you can select options from selectbox and also type into the selectbox as you wanted

any problems let me know

Ellandrd
0
 
b_rajathilagamAuthor Commented:

Dear third,

            ur code is works fine on both IE and MOZILA fine. but on opera the the selection button is moved down to selection box when i clicked that button (functinality is fine but action is different on opera). Could u please test on opera and make changes for opera?

Thanks.
0
 
thirdCommented:
works fine for me on Opera 7.54. make sure you're using the latest code.
0
 
b_rajathilagamAuthor Commented:

Dear third
  i am using Opera 7.54 only on Linux (FC2). But i still getting above mentioned problem. How do i know your code is latest or old?

Thanks.
0
 
Cem TürkSenior Software EngineerCommented:
No comment has been added to this question in more than 21 days, so it is now classified as abandoned..
I will leave the following recommendation for this question in the Cleanup topic area:

PAQ - Refund

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

cem_turk

EE Cleanup Volunteer
0
 
CetusMODCommented:
PAQed with points refunded (300)

CetusMOD
Community Support Moderator
0

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.

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