Highlight typed text in drop down? 4

RichS · Aug 18, 2003

I want to provide a drop down box that will highlight, in the text box area, the first item in the list that matches the typed text. For example, if the items in a list are China and Chicago and the user types in "chi", "Chicago" appears in the text portion of the dropdown then if the next letter the user types is an "n" then "China" is displayed in the text box portion of the dropdown.

I don't even know what this functionality is called so any help in doing this would be greatly appreciated.

Rich

adam0101 · Aug 18, 2003

<html>

<head>
<title>comboBox</title>
<script language="JavaScript">
function autoComplete (field, select, property) {
var found = false;
for (var i=0;i<select.options.length;i++) {
if(select.options[property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
found=true; break;
}
}
if (found) { select.selectedIndex = i; }
else { select.selectedIndex = -1; }
if (field.createTextRange) {
if (!found) {
field.value=field.value.substring(0,field.value.length-1);
return;
}
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
if (cursorKeys.indexOf(event.keyCode+";&quot == -1) {
var r1 = field.createTextRange();
var oldValue = r1.text;
var newValue = found ? select.options[property] : oldValue;
if (newValue != field.value) {
field.value = newValue;
var rNew = field.createTextRange();
rNew.moveStart('character', oldValue.length) ;
rNew.select();
}
}
}
}</script>
</head>

<body>

<form>
<input ONKEYUP="autoComplete(this,this.form('test'),'text')">
<select name="test">
<option value="1">one
<option value="2">two
<option value="3">three
</select>

Adam

adam0101 · Aug 18, 2003

I actually got the original code from here

http://siteexperts.com/tips/elements/ts22/page3.asp

Adam

RichS · Aug 18, 2003

Thanks Adam,
Do you know of a way to do it all within the same element without the additional <input type=text> box?

Rich

adam0101 · Aug 18, 2003

I made this script that will insert a textbox and position it on top of the select box. It then clips the right side of the textbox and the left side of the select box so the down arrow looks like part of the text box. It works pretty well for Windows 2000 on IE. I've never used this in real applications before because I'm guessing it would look pretty bad on Windows XP or Macs (since their textboxes are different). But maybe it'll help you.

<html>

<head>
<title>comboBox</title>
<script language="JavaScript">
// New Event! Add onNotInList="" to your select box to fire an event when the typed value is not an option of the drop-down.

var boxWidth = 200; // Width of the select boxes
var comboAll = false; // true = all select boxes; false = only select boxes with the attribute combo="combo"
var forceMatch = true; // true = typed value must exist in the drop-down on blur; false = any value accepted on blur.
var forceAutoMatch = false; // true = only allows values in the drop-down to be typed; false = any value accepted.

var f;
function initCbo(){
var output='';
for(var f=0;f<document.forms.length;f++){
var s=document.forms[f].elements;
for(var i=0;i<s.length;i++){
if(s.type == 'select-one' && (s.combo=='combo' || comboAll==true)){
output='';
s.style.position='absolute';
s.style.width='100%';
s.style.zIndex='1';
s.style.clip='rect(auto,auto,auto,'+(boxWidth-20)+')';
s.onfocus="window.clearTimeout(window.tmr"+s.name+&quot";
s.onchange='setTextBox(this,this.form)';
output+='<input type="text" name="'+s.name+'Box" size="20" style="position: absolute; width: '+(boxWidth-18)+'; z-index: 2;clip:rect(auto,'+(boxWidth-19)+',auto,auto)" onblur="checkInList(\''+s.name+'\',this.form)" ONKEYUP="autoComplete(this,this.form(\''+s.name+'\'),\'text\')" onNotInList="'+s.onNotInList+'">';
output='<span style="position:relative;width:'+boxWidth+'px;height:22px">'+s.outerHTML+output+'</span>';
s.outerHTML=output;
}
}
}
}

function checkInList(listName,f){
if(forceMatch){
var found=false;
var box=f[listName+"Box"];
var list=f[listName];
for(var i=0;i<list.length;i++){
if(box.value==list.text || box.value==''){
found=true;
break;
}
}
if(!found){
window.f=f;
eval("window.tmr"+listName+"=setTimeout(\"notInList('"+box.name+"')\",100)"
}
}
}
function notInList(box){
alert('The value you typed could not be found in the list!');
eval(f[box].onNotInList);
f[box].select();
f[box].focus();
}
function setTextBox(list,f){
var box = f[list.name+"Box"]
box.value=list[list.selectedIndex].text;
box.select();
box.focus();
}
function autoComplete (field, select, property) {
var found = false;
for (var i=0;i<select.options.length;i++) {
if(select.options[property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
found=true; break;
}
}
if (found) { select.selectedIndex = i; }
else { select.selectedIndex = -1; }
if (field.createTextRange) {
if (forceAutoMatch && !found) {
field.value=field.value.substring(0,field.value.length-1);
return;
}
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
if (cursorKeys.indexOf(event.keyCode+";&quot == -1) {
var r1 = field.createTextRange();
var oldValue = r1.text;
var newValue = found ? select.options[property] : oldValue;
if (newValue != field.value) {
field.value = newValue;
var rNew = field.createTextRange();
rNew.moveStart('character', oldValue.length) ;
rNew.select();
}
}
}
}
window.onload=initCbo; // initalizes the script.
</script>
</head>

<body>

<form>
<table border=1>
<tr><td>label1</td>
<td><select name="test" combo="combo">
<option value="1">one
<option value="2">two
</select></td></tr>
<tr><td>label2</td>
<td><select name="test2">
<option value="1">one
<option value="2">two
</select></td></tr></table>
</form>

</body>

</html>

Adam

RichS · Aug 18, 2003

Wow... This works great on W2000 with IE 6.0 which is the standard we use. You are my new JS role model.

I've been trying for a while to get this to work. Now I just gotta go see how you did it.

Thanks a bunch!

Rich

clarkin · Aug 18, 2003

Your textbox-over-select solution does look pretty good in IE6 & Win2K. Nice one

RichS, I think a lot of users when presented with a big select (ie, it has a scrollbar) will type in the first letter of the word they want to jump to. Since its built in, you don't have to do anything..

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

RichS · Aug 19, 2003

True, but I am developing an application for use by blind people. If the user is searching for last name "Mazander" they may have to press the "M" character 200 times to get to the record that they want (such as in a phone book). Blind people only use the keyboard and each item in the list must be read to them using a screen reader. Being able to search by typing will be a big time saver.

Thanks for the feedback.

Rich

Rajesh99 · Oct 27, 2004

This is a good script I have been looking. Thanks, any side effects I should work on before using it?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Highlight typed text in drop down? 4

RichS

Programmer

adam0101

Programmer

adam0101

Programmer

RichS

Programmer

adam0101

Programmer

RichS

Programmer

clarkin

Programmer

RichS

Programmer

Rajesh99

Programmer

Similar threads

Part and Inventory Search

Sponsor