Find Item after 3 Characters Entered

[Rob]

I have a RadComboBox that gets populated on page_load() and is set w/ AutoPostback = "false" & EnableLoadOnDemand="false".  When the user starts typing in the text area of the control, I don't want to find a match in the list until at least 3 characters have been entered.  How can I accomplish this on the client side?  Right now it finds a match for each character typed.

Thanks,
Rob

[Thad]

Hi Dudeman,

Check out this article in the documentation, which gives a solution to your problem.
http://www.telerik.com/help/aspnet-ajax/combobox-request-items-given-number-letters.html

Thad

[Rob]

Thanks for your suggestion, Thad, but the provided link is not my situation at all.  Like I previously stated, this combobox is prepopuatedon pageload and will not be repopulated on demand.  The OnClientItemsRequesting event does not get fired off in my situation.  I am looking for a JS event to evaluate the first 3 characters typed.  I notice in OnClientKeyPressing that s.get_text() equals the entire text of the matching item in the text area. 

Maybe I have to determine the difference of unhighlighted characters from the length of the item's text, because I notice that as I type the first 3 characters, they become unhighlighted one by one?

[Thad]

Hi Dudeman,

Sorry about that.  Try this instead, which works for me.

function rcbFind_ClientKeyPressing(sender, eventArgs) {
    sender.set_markFirstMatch(sender.get_inputDomElement().selectionStart >= 2);
}

Here is the markup I tested it with, in case your settings are different.

<telerik:RadComboBox ID="rcbFind" runat="server" MarkFirstMatch="true" AllowCustomText="true"
    OnClientKeyPressing="rcbFind_ClientKeyPressing">
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="January" Value="1" />
        <telerik:RadComboBoxItem runat="server" Text="February" Value="2" />
        <telerik:RadComboBoxItem runat="server" Text="March" Value="3" />
        <telerik:RadComboBoxItem runat="server" Text="April" Value="4" />
        <telerik:RadComboBoxItem runat="server" Text="May" Value="5" />
        <telerik:RadComboBoxItem runat="server" Text="June" Value="6" />
        <telerik:RadComboBoxItem runat="server" Text="July" Value="7" />
        <telerik:RadComboBoxItem runat="server" Text="August" Value="8" />
        <telerik:RadComboBoxItem runat="server" Text="September" Value="9" />
        <telerik:RadComboBoxItem runat="server" Text="October" Value="10" />
        <telerik:RadComboBoxItem runat="server" Text="November" Value="11" />
        <telerik:RadComboBoxItem runat="server" Text="December" Value="12" />
    </Items>
</telerik:RadComboBox>

Hope that helps better than my first response!
Thad

[Thad]

Whoops - that JavaScript works in Firefox/Chrome only.  Here is the cross browser version.  I tested in IE8, Firefox 3.6, and Chrome 12.

function rcbFind_ClientKeyPressing(sender, eventArgs) {
    if (document.selection != undefined) { // IE
        var len = sender.get_text().length - document.selection.createRange().text.length;
        sender.set_markFirstMatch(len >= 2);
    }
    else if (sender.get_inputDomElement().selectionStart != undefined) { // Firefox, Chrome
        sender.set_markFirstMatch(sender.get_inputDomElement().selectionStart >= 2);
    }
}

Thad

[Rob]

The IE code is what I was looking for and it works like a charm.  Thank you so much, Thad!