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

ComboBox with DropDownList style

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
Wongy
Asked:
Wongy
  • 4
  • 2
  • 2
  • +3
1 Solution
 
danataylorCommented:
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
 
GrandSchtroumpfCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
WongyAuthor Commented:
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
 
flow79Commented:
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
 
knightEknightCommented:
Here's my version:  http:Q_20680352.html
0
 
WongyAuthor Commented:
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
 
GrandSchtroumpfCommented:
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
 
WongyAuthor Commented:
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
 
knightEknightCommented:
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
 
WongyAuthor Commented:
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

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

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