[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

lookahead in a dropdown

Posted on 2005-05-11
7
Medium Priority
?
279 Views
Last Modified: 2010-08-05
Hey

        I want to be able to sort a dropdown as the user enters the first few characters.....

 For example if the user is entering "pa...." then the list should contain first all the strings starting with "pa" and then the remaining strings...


Help pleas.,
Thank you
0
Comment
Question by:letsbedecent
  • 4
  • 2
7 Comments
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13982724
that links to a recent question that is still active.
0
 
LVL 25

Accepted Solution

by:
James Rodgers earned 2000 total points
ID: 14085927
hows this, found this on teh net, can't remember where
here's teh HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
</head>

<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>ComboBox Demo</title>

<style>
body          {font-size:9pt;font-family:verdana;}
button        {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;}
a             {color:red;}
a:hover       {color:blue}
</style>

</head>

<body>
<script src="ComboBox.js"></script>

<script>

dm=new ComboBox("dm")

dm.add(
       new ComboBoxItem("barge",1),
       new ComboBoxItem("benluc",2),
       new ComboBoxItem("benlieeeeck",3),
       new ComboBoxItem("taco",4)
      )
/*
// generate 1000 more to test performance
for (var i = 0; i < 100; i++ )
      dm.add(new ComboBoxItem(String(i)));
*/

</script>

<br><br><br>

<button hidefocus onClick="alert(dm.value)">Show Value</button>&nbsp;<button hidefocus
onClick="dm.add(new ComboBoxItem(window.prompt('Type in the text to add',''),window.prompt('Type in a value to add','')))"
>Add Item</button>&nbsp;<button hidefocus onClick="dm.remove(window.prompt('Type in an index to remove',''))"
>Remove Item</button>
<br>
<br>
<!--testing-->
</body>
</html>



</body>
</html>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 25

Expert Comment

by:James Rodgers
ID: 14085934
here's teh js

ComboBox.js

/*
 *      ComboBox
 *      By Jared Nuzzolillo
 *
 *      Updated by Erik Arvidsson
 *      http://webfx.eae.net/contact.html#erik
 *      2002-06-13      Fixed Mozilla support and improved build performance
 *
 */

Global_run_event_hook = true;
Global_combo_array    = new Array();

Array.prototype.remove=function(dx)
{
    if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false}
    for(var i=0,n=0;i<this.length;i++)
    {  
        if(this[i]!=this[dx])
        {
            this[n++]=this[i]
        }
    }
    this.length-=1
}

function ComboBox_make()
{
    var bt,nm;
    nm = this.name+"txt";
   
    this.txtview = document.createElement("INPUT")
    this.txtview.type = "text";
    this.txtview.name = nm;
    this.txtview.id = nm;
    this.txtview.className = "combo-input"
    this.view.appendChild(this.txtview);
       
    this.valcon = document.createElement("INPUT");
    this.valcon.type = "hidden";
    this.view.appendChild(this.valcon)
   
    var tmp = document.createElement("IMG");
    tmp.src = "___";
    tmp.style.width = "1px";
    tmp.style.height = "0";
    this.view.appendChild(tmp);
   
    var tmp = document.createElement("BUTTON");
    tmp.appendChild(document.createTextNode(6));
    tmp.className = "combo-button";
   
      this.view.appendChild(tmp);
         tmp.onfocus = function () { this.blur(); };
      tmp.onclick = new Function ("", this.name + ".toggle()");
}

function ComboBox_choose(realval,txtval)
{
    this.value         = realval;
    var samstring = this.name+".view.childNodes[0].value='"+txtval+"'"
    window.setTimeout(samstring,1)
    this.valcon.value  = realval;
}

function ComboBox_mouseDown(e)
{
    var obj,len,el,i;
    el = e.target ? e.target : e.srcElement;
    while (el.nodeType != 1) el = el.parentNode;
    var elcl = el.className;
    if(elcl.indexOf("combo-")!=0)
    {
                        
        len=Global_combo_array.length
        for(i=0;i<len;i++)
        {
       
            curobj = Global_combo_array[i]
           
            if(curobj.opslist)
            {
                curobj.opslist.style.display='none'
            }
        }
    }
}

function ComboBox_handleKey(e)
{
    var key,obj,eobj,el,strname;
    eobj = e;
    key  = eobj.keyCode;
    el = e.target ? e.target : e.srcElement;
    while (el.nodeType != 1) el = el.parentNode;
    elcl = el.className
    if(elcl.indexOf("combo-")==0)
    {
        if(elcl.split("-")[1]=="input")
        {
            strname = el.id.split("txt")[0]
            obj = window[strname];
                  
            obj.expops.length=0
            obj.update();
            obj.build(obj.expops);
            if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}//empty
            else{obj.opslist.style.display='block';}
            obj.value = el.value;
            obj.valcon.value = el.value;
        }
     }
}

function ComboBox_update()
{
    var opart,astr,alen,opln,i,boo;
    boo=false;
    opln = this.options.length
    astr = this.txtview.value.toLowerCase();
    alen = astr.length
    if(alen==0)
    {
        for(i=0;i<opln;i++)
        {
            this.expops[this.expops.length]=this.options[i];boo=true;
        }
    }
    else
    {
        for(i=0;i<opln;i++)
        {
            opart=this.options[i].text.toLowerCase().substring(0,alen)
            if(astr==opart)
            {
                this.expops[this.expops.length]=this.options[i];boo=true;
            }
        }
    }
    if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")}
}


function ComboBox_remove(index)
{
    this.options.remove(index)
}

function ComboBox_add()
{
    var i,arglen;
    arglen=arguments.length
    for(i=0;i<arglen;i++)
    {
        this.options[this.options.length]=arguments[i]
    }
}

function ComboBox_build(arr)
{
    var str,arrlen
    arrlen=arr.length;
    str = '<table class="combo-list-width" cellpadding=0 cellspacing=0>';
    var strs = new Array(arrlen);
    for(var i=0;i<arrlen;i++)
    {
        strs[i] = '<tr>' +
                  '<td class="combo-item" onClick="'+this.name+'.choose(\''+arr[i].value+'\',\''+arr[i].text+'\');'+this.name+'.opslist.style.display=\'none\';"' +
                  'onMouseOver="this.className=\'combo-hilite\';" onMouseOut="this.className=\'combo-item\'" >&nbsp;'+arr[i].text+'&nbsp;</td>' +
                  '</tr>';
    }
    str = str + strs.join("") + '</table>'
   
    if(this.opslist){this.view.removeChild(this.opslist);}
   
    this.opslist = document.createElement("DIV")
    this.opslist.innerHTML=str;
    this.opslist.style.display='none';
    this.opslist.className = "combo-list";
    this.opslist.onselectstart=returnFalse;
    this.view.appendChild(this.opslist);    
}

function ComboBox_toggle()
{
    if(this.opslist)
    {
        if(this.opslist.style.display=="block")
        {
            this.opslist.style.display="none"
        }
        else
        {
            this.update();
            this.build(this.options);
            this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
            this.opslist.style.display="block"
        }
    }
    else
    {
        this.update();
        this.build(this.options);
        this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
        this.opslist.style.display="block"
    }
}

function ComboBox()
{
    if(arguments.length==0)
    {
        self.status="ComboBox invalid - no name arg"
    }

    this.name     = arguments[0];
    this.par      = arguments[1]||document.body
    this.view     = document.createElement("DIV");
    this.view.style.position='absolute';
    this.options  = new Array();
    this.expops   = new Array();
    this.value    = ""

    this.build  = ComboBox_build
    this.make   = ComboBox_make;
    this.choose = ComboBox_choose;
    this.add    = ComboBox_add;
    this.toggle = ComboBox_toggle;
    this.update = ComboBox_update;
    this.remove = ComboBox_remove;

    this.make()
    this.txtview = this.view.childNodes[0]
    this.valcon  = this.view.childNodes[1]
   
    this.par.appendChild(this.view)

    Global_combo_array[Global_combo_array.length]=this;
    if(Global_run_event_hook){ComboBox_init()}
}

ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you must

function ComboBox_init()
{
      if (document.addEventListener) {
            document.addEventListener("keyup", ComboBox_handleKey, false );
            document.addEventListener("mousedown", ComboBox_mouseDown, false );
      }
      else if (document.attachEvent) {
            document.attachEvent("onkeyup", function () { ComboBox_handleKey(window.event); } );
            document.attachEvent("onmousedown", function () { ComboBox_mouseDown(window.event); } );
      }
      
    Global_run_event_hook = false;
}

function returnFalse(){return false}

function ComboBoxItem(text,value)
{
    this.text  = text;
    this.value = value;
}

document.write('<link rel="STYLESHEET" type="text/css" href="ComboBox.css">')
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 14085967
here's teh css

ComboBox.css

.combo-button {
      cursor:                  hand;
      cursor:                  pointer;      
      height:                  20px;
      border:                  1px solid rgb(120,172,255);
      padding:            0;
      background:            rgb(234,242,255);
      width:                  14px;
      vertical-align:      baseline;
      font-size:            8pt;
      font-family:      Webdings, Marlett;
}
.combo-hilite {
      cursor:                  hand;
      cursor:                  pointer;
      background:            rgb(234,242,255);
      border:                  1px solid rgb(120,172,255);
      color:                  black;
      font-family:      verdana;
      font-size:            9pt;
}
.combo-item   {
      cursor:                  hand;
      cursor:                  pointer;
      background:            white;
      border:                  1px solid white;
      color:                  black;
      font-family:      verdana;
      font-size:            9pt;
}

.combo-input  {
      border:                  1px solid rgb(120,172,255) !important;
      width:                  138px !important;
      vertical-align:      baseline;
}

.combo-list table {
      table-layout:      fixed;
      width:                  149px;
}

.combo-list {
      border:                        1px solid black;
      background:                  white;
      padding:                  1px;
      width:                    149px;
      
      /* enable this if you want scroll bars
      height:                        200px;
      overflow:                  auto;
      overflow-x:                  visible;
      overflow-y:                  auto;
      scrollbar-base-color:            rgb(234,242,255);
      scrollbar-highlight-color:      rgb(234,242,255);
      scrollbar-3dlight-color:      rgb(120,172,255);
      scrollbar-darkshadow-color:      rgb(120,172,255);
      scrollbar-shadow-color:            rgb(234,242,255);
      scrollbar-face-color:            rgb(234,242,255);
      scrollbar-track-color:            white;
      scrollbar-arrow-color:            black;
      */
}
0
 

Author Comment

by:letsbedecent
ID: 14096446
Thanks for the huge code....

I will test it(i mean use it)  and get back to you....  if i have any problems.
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 14449224
glad i could help

thanks for the points
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

830 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