?
Solved

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

Posted on 2005-04-03
10
Medium Priority
?
559 Views
Last Modified: 2008-01-09

 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
Comment
Question by:b_rajathilagam
[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
  • 3
  • 3
  • 2
  • +2
10 Comments
 
LVL 30

Expert Comment

by:third
ID: 13695519
0
 

Author Comment

by:b_rajathilagam
ID: 13695689

 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
 
LVL 30

Expert Comment

by:third
ID: 13696204
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
Independent Software Vendors: 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 16

Expert Comment

by:ellandrd
ID: 13696667
you can select options from selectbox and also type into the selectbox as you wanted

any problems let me know

Ellandrd
0
 

Author Comment

by:b_rajathilagam
ID: 13700626

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
 
LVL 30

Expert Comment

by:third
ID: 13703001
works fine for me on Opera 7.54. make sure you're using the latest code.
0
 

Author Comment

by:b_rajathilagam
ID: 13704105

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
 
LVL 17

Expert Comment

by:Cem Türk
ID: 15638131
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
 

Accepted Solution

by:
CetusMOD earned 0 total points
ID: 15677156
PAQed with points refunded (300)

CetusMOD
Community Support Moderator
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 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