Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Highlight Combo Box Selection By First Letter

Posted on 2002-07-09
7
Medium Priority
?
203 Views
Last Modified: 2010-04-09
This is sort of a minor problem but my boss would like it to work.
I have a combo box with several alphabetic choices available.
When the user selects an item with the mouse, and then types the first letter of an item he wants, say C, the item selected always goes to the last item down in the list that begins with that letter, C.
Is there a way I can make the default go to the first item that begins with C, or a different combo box that I could specify to get my desired result?

Maybe this is a problem with IE 6 and can't be fixed by programming.

Thanks in Advance.
John
0
Comment
Question by:jtrapat1
[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
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 19

Expert Comment

by:webwoman
ID: 7141710
It goes to the LAST item? Normally it drops to the FIRST item.

Why are you selecting an item with the mouse before you type a letter? Is it the same letter as what you're typing? If so, that's the problem -- if you keep hitting a letter, it will drop you through the choices that start with that letter.

Try just typing a letter, not using the mouse at all. It should drop you to the first item starting with that letter.

Unless IE6 does something really weird and totally contrary to every other browser I've ever used, this sounds more like a user issue... ;-)
0
 
LVL 17

Expert Comment

by:dorward
ID: 7141731
I'm not quite sure what you are asking, I think you want to know how to change the default option.

XHTML:

<select name="fruit">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Cherry" selected="selected">Cherry</option>
<option value="Date">Date</option>
</select>

or for old style HTML:

<select name="fruit">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Cherry" selected>Cherry</option>
<option value="Date">Date</option>
</select>
0
 
LVL 17

Expert Comment

by:dorward
ID: 7141743
Of course I manage to work out what the question actually is just after I hit submit. It sounds to me like a problem with the user or with a bug in your particular copy of IE (given that it runs on windows a format and reinstall would probably fix it)
0
Technology Partners: 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!

 

Author Comment

by:jtrapat1
ID: 7141797
I'll try to explain it a little better:

The highlighted item that is selected IS the right item alphabetically BUT, it is highlighted all the way down at the bottom of that section of the combo box choices.

Instead of being moved up to the top and ready to be chosen when the user clicks the mouse.

My boss would like it to work like the autocomplete in IE.
You can see it on yahoo.com for example.
If you go to a search box, hit the down arrow key and it will bring up a list of your previous searches alphabetically.
Then, if you type C for example, the closest item will move to the top of the list, close to the textbox.

It's a minor point, I know, but can it be done?

Thanks
John
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 200 total points
ID: 7141812
<HTML>
<HEAD>
<SCRIPT language='JavaScript'>

//////////////////////// IE4+ ComboBox Script -- (C) 1999 by Ralph L. Brown (akakEk) //////////////////////////

var UNDEFINED;  // do not assign!


function getX(obj)
{
   return( obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft+getX(obj.offsetParent) );
}

function getY(obj)
{
   return( obj.offsetParent==null ? obj.offsetTop : obj.offsetTop+getY(obj.offsetParent) );
}

function isvalidchar(achar,validstr)
{
  return( validstr.toUpperCase().indexOf(achar.toString().toUpperCase(),0) >= 0 );
}


function onSelectFocus( objSelect, flgInput )
{
  if ( document.layers ) // NS4 (which doesn't work for SELECT objects anyway)
  {
    //document.captureEvents( Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP );
    //document.onkeydown  = selectKeyDownHandler;
    //document.onkeypress = selectKeyPressHandler;
    //document.onkeyup    = null;
  }
  else if ( document.all ) // IE4
  {

    if ( !document.all.divComboBubble )  // if this is the first time this function is called
    {                                    // then create the bubble text window (<DIV>).
      document.body.insertAdjacentHTML("beforeEnd", "<DIV id='divComboBubble' style='position:absolute;top:0px;left:0px;visibility:hidden'></div>");
    }

    // create/init data elements

    objSelect.X = getX(objSelect)+2;
    objSelect.Y = getY(objSelect)-20;
    objSelect.strKeyInBuf = '';
    objSelect.flgInput = false;

    // if flgInput is 'INPUT' then this is an enterable list box.
    if ( flgInput != UNDEFINED )
    {
       objSelect.flgInput = ( (''+flgInput).toUpperCase() == 'INPUT' );
    }


    // setup event handlers
    objSelect.onmouseover = selectMouseOverHandler;
    objSelect.onmouseout  = selectMouseOutHandler;
    objSelect.onblur      = selectBlurHandler;
    objSelect.onkeydown   = selectKeyDownHandler;
    objSelect.onkeypress  = selectKeyPressHandler;
    objSelect.onkeyup     = null;


    // display bubble help (title)
    //objSelect.onmouseover(window.event);  // this should work, but in early versions of IE4 it doesn't!
    selectMouseOverHandler(window.event);
  }
}


function BubbleText(objSelect)
{
  var s = divComboBubble.innerHTML = '';

  if ( !objSelect )  // for the onBlur event to clear out the bubble help
  {
    return(false);
  }

  with ( objSelect )
  {
    if ( strKeyInBuf.length > 0 )
    {
      if ( strKeyInBuf == title )
      {
         s = '<FONT color="blue">' + strKeyInBuf + '</font>';
      }
      else if ( ( selectedIndex >= 0 ) && ( strKeyInBuf == options[selectedIndex].text ) )  // unique match found
      {
         s = '<B>' + strKeyInBuf + '</b>';
      }
      else
      {
         var c = strKeyInBuf.substring(strKeyInBuf.length-1,strKeyInBuf.length);
         c = ( c == ' ' ) ? '&nbsp;' : '<B>' + c + '</b>';
         s = strKeyInBuf.substring(0,strKeyInBuf.length-1) + c;
      }

      divComboBubble.innerHTML = '<TABLE cellpadding=0 cellspacing=0 style="background-color:INFOBACKGROUND;'
      + 'font:8pt ms sans serif;padding:2px 2px 2px 2px;color:INFOTEXT;border:1px solid INFOTEXT"><TR><TD align=left><NOBR>'+s+'</nobr></td></tr></table>';
    }

    divComboBubble.style.posLeft = X;
    divComboBubble.style.posTop  = Y;
    divComboBubble.style.visibility  = '';
  }

  return(true);
}


function findSelectEntry( objSelect, head, tail )  // uses divide-and-conquer search, assumes sorted list
{
  with ( objSelect )
  {
    if ( options.length <= 0 )
    {
      strKeyInBuf = ' <FONT color="red">No selections available.</font> ';
      BubbleText( objSelect );
      window.status = strKeyInBuf = '';
      return(-1);
   }

   if ( strKeyInBuf == '' )
   {
      strKeyInBuf = title;
      BubbleText( objSelect );
      window.status = strKeyInBuf = '';
      selectedIndex=0;  // set to top
      return( selectedIndex = options[selectedIndex].text.length ? -1 : 0 );
   }

   var mid = Math.round( (head+tail)/2 );

   if ( strKeyInBuf.toUpperCase() == options[mid].text.substring(0,strKeyInBuf.length).toUpperCase() )
   {
      while ( (mid>0)  &&  strKeyInBuf.toUpperCase() == options[mid-1].text.substring(0,strKeyInBuf.length).toUpperCase() )
      {
         mid--;  // get the topmost matching item in the list, not just the first found
      }

      selectedIndex=mid;

      window.status = strKeyInBuf = options[mid].text.substring(0,strKeyInBuf.length);

      if ( mid == Math.round( (head+tail)/2 ) )  // if the original mid is an exact match
      {
         if ( (mid==tail) || ( (mid<tail) && strKeyInBuf.toUpperCase() != options[mid+1].text.substring(0,strKeyInBuf.length).toUpperCase() ) )
         {
            window.status = strKeyInBuf = options[mid].text;  // unique match found
         }
      }

      BubbleText( objSelect );

      return( selectedIndex );
    }

    if ( head >= tail )  // then since no exact match was found, go back to previous strKeyInBuf (thus the length-1)
    {
       strKeyInBuf = strKeyInBuf.substring(0,strKeyInBuf.length-1)
       return( findSelectEntry( objSelect, 0, options.length-1 ) );
    }

    if ( strKeyInBuf.toUpperCase() < options[mid].text.substring(0,strKeyInBuf.length).toUpperCase() )
    {
       return( findSelectEntry( objSelect, head, Math.max(head,mid-1) ) );
    }

    return( findSelectEntry( objSelect, Math.min(mid+1,tail), tail ) );
  }
}


function selectMouseOverHandler(e)
{
  var event = e ? e : window.event;  // to handle both NS4 and IE4 events

  if ( event.srcElement.strKeyInBuf == '' )
  {
     event.srcElement.strKeyInBuf = event.srcElement.title;
     BubbleText( event.srcElement );
     event.srcElement.strKeyInBuf = '';
  }
  else
  {
     BubbleText( event.srcElement );
  }

  return(true);
}


function selectMouseOutHandler(e)
{
  var event = e ? e : window.event;  // to handle both NS4 and IE4 events

  if ( event.srcElement != document.activeElement )
  {
     BubbleText( event.srcElement );
  }

  return(true);
}


function selectBlurHandler(e)
{
  var event = e ? e : window.event;  // to handle both NS4 and IE4 events

  event.srcElement.strKeyInBuf = '';
  window.status = (event.srcElement.selectedIndex>=0) ? event.srcElement.options[event.srcElement.selectedIndex].text : '';
  BubbleText( event.srcElement );

  return(true);
}


function selectKeyDownHandler(e)
{
  var event = e ? e : window.event;  // to handle both NS4 and IE4 events

  with ( event.srcElement )
  {
    // this is to correct the search bug when the list is left open after single-click
    if (  ( strKeyInBuf == '' ) && ( event.keyCode > 40 ) )
    {
       event.srcElement.blur();
       event.srcElement.focus();
    }

    switch(event.keyCode)
    {
      case(8):  // backspace
      {
         if ( ( selectedIndex >= 0 ) && ( strKeyInBuf == options[selectedIndex].text ) && !event.srcElement.flgInput )
         {
            window.status = strKeyInBuf = '';
         }
         else
         {
            window.status = strKeyInBuf = strKeyInBuf.substring(0,strKeyInBuf.length-1);
         }

         BubbleText( event.srcElement );
         event.keyCode = 0;
         return(false);
      }

      case(9):   // tab
      case(13):  // enter
      {
         event.keyCode = 9;  // convert enter to tab
         return(true);
      }

      case(27):  // escape
      {
         window.status = strKeyInBuf = '';
         BubbleText( event.srcElement );
         event.keyCode = 0;
         return(false);
      }

      case(32):  // space
      {
         window.status = strKeyInBuf += ' ';
         // this must be fired explicitely for spaces
         return( event.srcElement.flgInput ? event.srcElement.flgInput : selectKeyPressHandler(event) );
      }

      // I don't know if these are universal
      case(33):  // page up
      case(34):  // page down
      case(35):  // end
      case(36):  // home
      case(38):  // up arrow
      case(40):  // down arrow
      {
         window.status = strKeyInBuf = '';
         BubbleText( event.srcElement );
         return(false);
      }

    }  // end switch
  }  // end with

  return(true);
}


function selectKeyPressHandler(e)
{
   var event = e ? e : window.event;  // to handle both NS4 and IE4 events

   if ( event.keyCode == 13 ) { event.srcElement.blur(); event.srcElement.focus(); }

   if ( isvalidchar(String.fromCharCode(event.keyCode),"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 `~!@#$%^&*()_-+={}[]|:;'<>,./?\\\"" ) )
   {
      event.srcElement.strKeyInBuf += String.fromCharCode(event.keyCode);
   }


   if ( event.srcElement.flgInput )   // this is an enterable field
   {
      event.srcElement.options.length = 0;
      event.srcElement.strKeyInBuf    = event.srcElement.strKeyInBuf.substring(0,31);  // maxlength=32, should be set elsewhere
      event.srcElement.options[0]     = new Option( event.srcElement.strKeyInBuf, event.srcElement.strKeyInBuf );
      event.srcElement.selectedIndex  = 0;
   }
   else   // search to find the matching value
   {
      // must use setTimeout to override the default SELECT keypress event(s)
      var strSel = 'document.' + event.srcElement.form.name + '.' + event.srcElement.name;
      setTimeout( 'findSelectEntry(' + strSel + ',0,' + strSel + '.options.length-1);' , 1 );
   }

   return(true);
}


////////////////////////////////// -- End ComboBox.js -- ////////////////////////////////////////


</script>

</head>

<BODY onLoad='document.myForm.myCombo.focus();' >

<CENTER>
<P align="center">&nbsp;<BR>
<P align="center">&nbsp;<BR>

<FORM name='myForm'>

 <SELECT name='myCombo'  size='1' title="Please type your name in the combobox."  onFocus='onSelectFocus(this);' >
  <OPTION></option>
  <OPTION>Abe</option>
  <OPTION>Alice</option>
  <OPTION>Alicia</option>
  <OPTION>Allen</option>
  <OPTION>Arthur</option>
  <OPTION>Arty</option>
  <OPTION>Beatrice</option>
  <OPTION>Ben</option>
  <OPTION>Bill</option>
  <OPTION>Bing</option>
  <OPTION>Brian</option>
  <OPTION>Brice</option>
  <OPTION>Bruce</option>
  <OPTION>Carie</option>
  <OPTION>Catherine</option>
  <OPTION>Cathy</option>
  <OPTION>Charles</option>
  <OPTION>Chase</option>
  <OPTION>Chris</option>
  <OPTION>Christian</option>
  <OPTION>Christina</option>
  <OPTION>Christopher</option>
  <OPTION>Darren</option>
  <OPTION>Darryl</option>
  <OPTION>David</option>
  <OPTION>Dean</option>
  <OPTION>Derrick</option>
  <OPTION>Don</option>
  <OPTION>Doug</option>
  <OPTION>Eathen</option>
  <OPTION>Evan</option>
  <OPTION>Forrest</option>
  <OPTION>Frank</option>
  <OPTION>George</option>
  <OPTION>Greg</option>
  <OPTION>Hank</option>
  <OPTION>Henry</option>
  <OPTION>Imus</option>
  <OPTION>Ingred</option>
  <OPTION>Jack</option>
  <OPTION>Jackie</option>
  <OPTION>Jacob</option>
  <OPTION>James</option>
  <OPTION>Jason</option>
  <OPTION>Jesus</option>
  <OPTION>John</option>
  <OPTION>Kayla</option>
  <OPTION>Kyle</option>
  <OPTION>Larry</option>
  <OPTION>Luke</option>
  <OPTION>Matthew</option>
  <OPTION>Mark</option>
  <OPTION>Michael</option>
  <OPTION>Michele</option>
  <OPTION>Mickey</option>
  <OPTION>Mike</option>
  <OPTION>Mitch</option>
  <OPTION>Nathan</option>
  <OPTION>Ned</option>
  <OPTION>Ollie</option>
  <OPTION>Oppie</option>
  <OPTION>Paul</option>
  <OPTION>Perry</option>
  <OPTION>Ralph</option>
  <OPTION>Red</option>
  <OPTION>Rex</option>
  <OPTION>Rick</option>
  <OPTION>Ried</option>
  <OPTION>Rod</option>
  <OPTION>Roger</option>
  <OPTION>Sally</option>
  <OPTION>Sam</option>
  <OPTION>Sidney</option>
  <OPTION>Steve</option>
  <OPTION>Ted</option>
  <OPTION>Tim</option>
  <OPTION>Van</option>
  <OPTION>Vince</option>
  <OPTION>Wayne</option>
  <OPTION>Will</option>
  <OPTION>William</option>
  <OPTION>Wink</option>
 </select>

</form>

</center>
</p>

</body>
</html>
0
 
LVL 19

Expert Comment

by:webwoman
ID: 7142311
Seems an awful lot of work for a combo box that's working just the way it's supposed to... ;-)

Only works in IE, right?
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7143251
IE only, yes, as documented above.  It is a lot of work, but it does have some nice functionality -- including the requested auto-complete.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
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.
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 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…

719 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