Selecting an option in dropdownlist using more than one Character

Major problem with dropdownlist is, it wont allow users to select an option in it using more than one character. Because of this, if you have 100 options starts with same character. Then you cant directly go to that entry, either you need to use mouse to select orelse keydown that entry to select it. In this article you will see an workaround to select an option in dropdownlist using more than one character.

To implement this functionality you need to write client side scripts.This funtionality works with the help of an custom attribute called "persistValue". When ever user presses any alphabets or numbers for searching option in dropdownlist, that value is stored in this attribute. So when user enter second character, the first character which is stored in attribute will be appended with this second character and used for searching in the dropdownlist. Same way it will work for third character also. If user press enter key or focus goes out of dropdownlist. Then it will clear the attribute value. Then next character entered will be new character for searching. Here is the three functions which are required to implement this functionality.

function clear_value()
{
obj = window.event.srcElement;
obj.setAttribute("persistValue","");
}

function divert_entry()
{
obj = window.event.srcElement;
//debugger;
if (obj.getAttribute("persistValue") == null)
obj.setAttribute("persistValue","");
var iKey;
var eAny_Event = window.event;

iKey = eAny_Event.keyCode;

var sChr = String.fromCharCode(iKey);
if (iKey == 13)
{
obj.setAttribute("persistValue","");
return true;
}

if (iKey == 8)
{
sDelete_Chr = obj.getAttribute("persistValue");
obj.setAttribute("persistValue", sDelete_Chr.substring(0,sDelete_Chr.length - 1));
sChr = '';
}
obj.setAttribute("persistValue",obj.getAttribute("persistValue") + sChr);
lookupItem(obj);
if (((iKey > 33 && iKey < 255) || (iKey == 8)) && (iKey ! = 40) && (iKey != 38))
eAny_Event.returnValue = false;
}

function lookupItem(obj)
{
var sCurValue = obj.getAttribute("persistValue").toLowerCase();
var bFound = false;
var iIndex = obj.selectedIndex;
var iNumOptions = obj.options.length;
var iPos = 0;
// Repeat until found or end of list is reached
while ((!bFound) && (iPos < iNumOptions))
{
// Do comparisons in lowercase
bFound = (obj.options[iPos].text.toLowerCase().indexOf(sCurValue)==0) ;
if (bFound)
iIndex = iPos;
iPos++;
}
if (bFound)
// Updated listbox
obj.selectedIndex = iIndex;
}






clear_value Function

This function is called on onblur event of dropdownlist, this function will clear the attribute value.

divert_entry Function

This function is called on onkeydown event of dropdownlist, this function will capture the entered key and then depending upon that it will do the action. If it is enter key, it will clear the attribute value. If it is escape key then it will remove last character from attribute value. If it is other key like alphabets or numbers, it will append that characters with attribute value and then use it for searching an option in dropdownlist. This how you can select an option in dropdownlist using more than one characters.

Here is how you will attach client side events to dropdownlist. Consider you have a dropdownlist like this,


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22


In the code behind you will attach the event like this,

drpNumbers.Attributes.Add("onblur", "clear_value()")
drpNumbers.Attributes.Add("onkeydown", "return divert_entry()")

Conclusion
In this article, you have seen how you can select an option in dropdownlist using more than two characters. This is just one of the implementation for doing this, you can customize this approach depending upon your requirements.

Courtesy: http://www.extremeexperts.com