?
Solved

ComboBox with DropDownList style

Posted on 2005-03-18
11
Medium Priority
?
11,663 Views
Last Modified: 2012-05-05
Hi,

Is it possible, in HTML, to have a ComboBox with DropDownList style? So that a user just needs to enter the first letters, and the rest will appear automatically in the ComboBox.

Thanx for your help.
0
Comment
Question by:Wongy
[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
  • 4
  • 2
  • 2
  • +3
11 Comments
 
LVL 9

Expert Comment

by:danataylor
ID: 13576196
Here ya go...

<select id="mySelect">
      <option>Apple</option>
      <option>Orange</option>
      <option>Pineapple</option>
      <option>Banana</option>
</select>

If you need more, try here:
http://www.w3schools.com/htmldom/dom_obj_select.asp
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13577034
Use a select as danataylor suggested.

> just needs to enter the first letters...
A good browser (such as firefox) will do that.
A bad browser (not to name it) will jump to the item that starts with the last letter you typed.

Try this for example:

<select id="mySelect">
     <option>Apple</option>
     <option>Atlanta</option>
     <option>Apache</option>
     <option>Aptitude</option>
     <option>Pineapple</option>
     <option>Banana</option>
</select>

Note that a real combo-box is a combination of a text field and a drop down list.  A combo box allows you to enter your own text if you wish.  Html only has drop-down lists.
0
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 
LVL 1

Author Comment

by:Wongy
ID: 13577992
I indeed noticed that Firefox does what I require, and not the other one. But the people who will go to my website are using the other browser...

Actually the 3rd link submitted by 'ldbkutty' is quite interesting... I'll investigate further.
0
 
LVL 13

Expert Comment

by:flow79
ID: 13579421
something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
     <title> Box </title>
     <style type="text/css">
     
     * {
          font-family:tahoma,verdana,arial;
          font-size:small;
     }

     div.controlBox {
          position:relative;
          border:1px solid gray;
          width:200px;
     }

     div.controlBox ul {
          position:absolute;
          list-style:none;
          display:none;
          margin:0;
          padding:0;
          width:200px;
          overflow:auto;
          top:22px;
          left:-1px;
          border:1px solid gray;
     }
          div.controlBox ul li {
               display:block;
               margin:0;
               padding:1px 2px;
          }

          div.controlBox ul li.hover {
               background:#204080;
               color:white;
               cursor:hand;
          }

     div.controlBox input {
          display:block;
          margin:0;
          padding:1px;
          width:180px;
          border:none;
          background:white;
     }

     div.controlBox img {
          position:absolute;
          width:16px;
          height:16px;
          right:2px;
          top:2px;          
     }

     </style>
     <script type="text/javascript">

     var masterList = [ 'United Arab Emirates', 'Argentine Republic', 'Austria', 'Australia', 'Belgium', 'Bulgaria', 'Brazil', 'Canada', 'Switzerland', 'China', 'Costa Rica', 'Republic of Cyprus', 'Czech Republic', 'Germany', 'Denmark', 'Estonia', 'Spain', 'European Union', 'Finland', 'France', 'United Kingdom', 'Greece', 'Hungary', 'Ireland', 'Israel', 'India', 'Iceland', 'Italy', 'Japan', 'Lithuania', 'Malta', 'Republic of Malta', 'Mexico', 'Malaysia', 'Netherlands', 'Norway', 'Nepal', 'New Zealand', 'Poland', 'Portugal', 'Romania', 'Russia', 'Sweden', 'Singapore', 'Slovenia', 'Slovak Republic', 'Ukraine', 'USA', 'Republic of Venezuela', 'Yugoslavia', 'South Africa'];

     window.onload = function() {
          var div, divs = document.getElementsByTagName('div');
          for(var i=0; i<divs.length; i++) {
               div = divs.item(i);
               
               if(/controlBox/.test(div.className)) {
                    new ControlBox(div, masterList);
               }
          }
     }

     function ControlBox(box, list) {
          this.box = box.getElementsByTagName('input')[0];
          this.list = box.getElementsByTagName('ul')[0];
          this.arrow = box.getElementsByTagName('img')[0];
          this.options = list;
          this.init();
     }

     ControlBox.prototype = {
          init:function() {
               var item, self = this;
               for(var i=0; i<this.options.length; i++) {
                    (item = document.createElement('li')).innerHTML = this.options[i];
                    this.list.appendChild(item);
                    this.initItem(item);
               }

               this.box.onkeyup = function() { self.sort(); }
               this.arrow.onmouseup = function() {
                    var css = self.list.style;
                    css.display = (css.display != 'block')? 'block':'none';
                    self.sort();
               }
          },

          initItem:function(item) {
               item.onmouseover = function(){ this.className = 'hover'; }
               item.onmouseout = function(){ this.className = ''; }
               var self = this;
               item.onclick = function() {
                    self.box.value = this.innerHTML;
                    self.list.style.display = 'none';
               }
          },

          sort:function() {
               var item, value = this.box.value.toLowerCase();
               this.list.style.height = 'auto';

               for(var i=0; i<this.list.childNodes.length; i++) {
                    item = this.list.childNodes.item(i);
                    if(!item.style) continue;
                    if(value && item.innerHTML.toLowerCase().indexOf(value) != 0) {
                         item.style.display = 'none';
                    } else {
                         item.style.display = 'block';
                    }
               }

               if(this.list.offsetHeight > 200) {
                    this.list.style.height = '200px';
               }
          }
     }

     </script>

</head>

<body>    
     
     <div class="controlBox">          
          <img src="somearrowimage.gif" alt="V" />
          <input type="text" class="text" value="c" />
          <ul class="list">
          </ul>
     </div>

</body>
</html>


from: http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21065480.html
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 500 total points
ID: 13582280
Here's my version:  http:Q_20680352.html
0
 
LVL 1

Author Comment

by:Wongy
ID: 13582832
knightEknight> I checked your version and I do not see the difference with the normal existing listbox in HTML...? (am I missing something?)

Furthermore it generates an error in IE (it has a problem with the BODY tag, I do not know why), but not with Firefox.

Unfortunately, in general, the examples provided here do not really suit me. They do not reproduce the same effect than a real combobox.

I think I'll just have to give up...

Thanx anyway for your helps.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13583133
IMHO using standard components is always better.
The programmer might think that his/her component is so so cool, but does the visitor really care?  What the visitor wants is something easy to use that (s)he is familiar with.  And the visitor should be familiar with his/her browser's behaviour.
DHTML only works in suported agents and under some conditions.
And finally, using DHTML adds complexity where it's usually not needed, adding potential bugs and maintenance headache.

Some DHTML can be usefull in complex web application interfaces (such as admin panels) where you can require the visitor to use a certain browser with certain features activated.  But a regular web site should be accessible by anyone using any user agent.
0
 
LVL 1

Author Comment

by:Wongy
ID: 13583442
Actually, in the listbox I will have ~2500 elements.
And typing only the first character won't really help. In the full list, for the same first character there are ~500 elements. And scrolling in those 500 items won't be that straightforward to find the desired item...
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 13584031
Wongy, what version of IE are you using?  Check to make sure you copied and pasted everything correctly -- see the instructions in that post.  It should work in IE for sure, but I don't know about FireFox.
0
 
LVL 1

Author Comment

by:Wongy
ID: 13584203
knightEknight: I tried again... and now it works!!!!!!! Finally! (I do not know why it didn't work the first time.)
FYI: It works also really good with Firefox.

That's exactly what I wanted.

Thanx!!!!!!!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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?
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

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