Find Item after 3 Characters Entered

6 posts, 0 answers
  1. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 10 Aug 2011 Link to this post

    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
  2. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 10 Aug 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 11 Aug 2011 Link to this post

    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?
  5. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 11 Aug 2011 Link to this post

    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
  6. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 11 Aug 2011 Link to this post

    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
  7. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 11 Aug 2011 Link to this post

    The IE code is what I was looking for and it works like a charm.  Thank you so much, Thad!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017