ASP.NET: DropDown List problem with IE6

SourceCode Download ~

Hosted by eSnips

Question ~

One member from Codeproject asked ~

Hi all,

There is a small requirement in drop down list. Suppose I have bounded the employee names to the drop down list. Now I am searching for a name “Peter”. So if I press ‘p’ and then ‘e’ it should go to Peter’s name. But it goes to Elizabeth’s name. Is there any solution for that? Could anyone of you please help me on that? I am using .Net version 2.0

Thanks and Regards,
Hariharan C

Solution ~

This issue occurs in Internet Explorer 6 version only. I have tested this issue with the most of browsers (Internet Explorer 7, Firefox 2.0.0.6, Opera 9.2 and Safari 3.0.3 (Windows).) It works fine except IE6. I looked for the solution and I came up with the following code.

var pressedKeyString = "";
var delay = 1000;
var timeID = null;

function move(){
var selectList = document.getElementById('DropDownList1');
var arr = new Array();
var idx = 0;
for(var i = 0; i = pressedKeyString.length){
if(pressedKeyString.toLowerCase() == selectList.options[i].value.substring(0,pressedKeyString.length).toLowerCase()){
selectList.selectedIndex = i;
i=selectList.options.length;
alert(pressedKeyString);
}
}
}
pressedKeyString = "";
}
function foo(e,id){
if(timeID != null)clearTimeout(timeID);
timeID = setTimeout("move();",delay);
var key;
if(window.event) // IE
{
key = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
key = e.which
}
var pressKey = String.fromCharCode(key);
pressedKeyString += pressKey;
}

The main idea of this code is that we will enable the timer to check whether the user is still typing or not. The timer will get clear as long as the user keep on typing. The character that you typed will keep on appending to the string called pressedKeyString. Note that the select list will be changed automatically on IE6 by default while typing. (Ya, this is what we don’t like). After typing finished (timer will count to 1000 minisecound), then the dropdown list will be changed to the option which is matched with the characters that you enter. (eg: if you type “pe” then dropdown list will select to “Peter”.)

Hope it helps. Feel free to let me know if you have any comment or suggestion. Thanks.