Solved

Highlight Combo Box Selection By First Letter

Posted on 2002-07-09
7
162 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
  • 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

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 50 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now