prevent using down and up arrow if combo box text is less than two characters

[Ryan]

I am binding a list of names to a combo box, and trying to limit the number of names visible to the user.  I have used filter="contains" to narrow the list.  I have also written a onkeyup handlers to only show names after at lease two characters are typed.  My problem is that if you use the up or down arrow key, it will still show the entire list.  I have attempted to write an onkeydown handler and check for e.keycode 38 and 40, but it's still not working correct.  my code follows:

 

function OnClientDropDownOpening(Sender, args) {
     //only open if there is moer than 1 characters
     if (!open)
         args.set_cancel(true);
 }


 function pageLoad() {
     // set up onkeyup and onkey down event
     var combo = $find("<%=cboSLPName.ClientID %>");
     var input = combo.get_inputDomElement();
     input.onkeyup = onKeyUpHandler;
     input.onkeydown = onKeyDownHandler;
 }


 function onKeyDownHandler(e) {
     if (!e)
         e = window.event;

     var combo = $find("<%=cboSLPName.ClientID %>");
     var comboText = String(combo.get_text());


     if (comboText.length < 2) {
         //////////////////////////////
         //
         //  don't do anything if the length is less than two and you press up arrow and down arrow
         //
         if (e.keyCode == 38 || e.keyCode == 40) {
             e.returnValue = false;
             if (e.preventDefault) {
                e.preventDefault();
            }
            return false;
         }
     }
 }


 function onKeyUpHandler(e) {
     var combo = $find("<%=cboSLPName.ClientID %>");
     var comboText = combo.get_text();


     if (comboText.length < 2) {
         open = false;
         combo.hideDropDown();
     }
     else {
         open = true;
         combo.showDropDown();
     }
 }

and my server control:

<telerik:RadComboBox runat="server" ID="cboSLPName" Width="250px"
                        EmptyMessage="Type Name" MarkFirstMatch="true" Filter="Contains" ExpandAnimation-Type="None"
                           ShowMoreResultsBox="false" ShowWhileLoading="false"
                         AllowCustomText="true"
                        ShowToggleImage="false" EnableItemCaching="true" LoadingMessage="Loading..."
        HighlightTemplatedItems="true" EnableLoadOnDemand="true" ShowDropDownOnTextboxClick="false"
                        OnClientDropDownOpening="OnClientDropDownOpening"
                        onselectedindexchanged="cboSLPName_SelectedIndexChanged"
                        AutoPostBack="true"  />

any suggestions you can give to help would be appreciated.  Thanks!

I know my code isn't pretty, so any suggestions you have for a more elegant design is also appreciated!!

[Helen]

Hi Ryan,

You may try to use the OnClientKeyPressing client-side event instead.
Here is a sample code:

<script type="text/javascript">
    var open;
    function OnClientDropDownOpening(Sender, args) {

        //only open if there is moer than 1 characters

            args.set_cancel(!open);
    }

    function pageLoad() {

        open = false;
    }

    function keyPressing(sender, eventArgs) {

        var combo = $find("<%=cboSLPName.ClientID %>");
        var comboText = String(combo.get_text());

        if (comboText.length < 2) {

            if (eventArgs.get_domEvent().keyCode == 38 || eventArgs.get_domEvent().keyCode == 40) {
                open = false;
                combo.hideDropDown();
            }
        }
        else {
            open = true;
            combo.showDropDown();
        }
    }
</script>

Regards,
Helen
the Telerik team