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.
<script language="jscript">
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;
}
</script>
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,
<asp:DropDownList id="drpNumbers" style="Z-INDEX: 101; LEFT:
24px; POSITION: absolute; TOP:
32px"
runat="server">
<asp:ListItem
Value="1">1</asp:ListItem>
<asp:ListItem
Value="2">2</asp:ListItem>
<asp:ListItem
Value="3">3</asp:ListItem>
<asp:ListItem
Value="4">4</asp:ListItem>
<asp:ListItem
Value="5">5</asp:ListItem>
<asp:ListItem
Value="6">6</asp:ListItem>
<asp:ListItem
Value="7">7</asp:ListItem>
<asp:ListItem
Value="8">8</asp:ListItem>
<asp:ListItem
Value="9">9</asp:ListItem>
<asp:ListItem
Value="10">10</asp:ListItem>
<asp:ListItem
Value="11">11</asp:ListItem>
<asp:ListItem
Value="12">12</asp:ListItem>
<asp:ListItem
Value="13">13</asp:ListItem>
<asp:ListItem
Value="14">14</asp:ListItem>
<asp:ListItem
Value="15">15</asp:ListItem>
<asp:ListItem
Value="16">16</asp:ListItem>
<asp:ListItem
Value="17">17</asp:ListItem>
<asp:ListItem
Value="18">18</asp:ListItem>
<asp:ListItem
Value="19">19</asp:ListItem>
<asp:ListItem
Value="20">20</asp:ListItem>
<asp:ListItem
Value="21">21</asp:ListItem>
<asp:ListItem
Value="22">22</asp:ListItem>
</asp:DropDownList>
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.