Autocomplete Listbox

5 posts, 0 answers
  1. Ramesh kumar Kuppusamy
    Ramesh kumar Kuppusamy avatar
    36 posts
    Member since:
    Apr 2010

    Posted 22 Aug 2011 Link to this post

    In my application I have the auto complete like textbox option with Listbox. If I type a word in the text box it should select appropriate list item in the list box. And also if select a list box item, the selected value to be reflected in the text box.

    Here everything is working fine except that if I key on the some filter character, the typed characters are repeating twise in the textbox.

    And Keyboard navigation is not working for Up/Down arrow keys after the user keyed in the textbox.

    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>
    Search: 
    <telerik:RadTextBox ID="RadTextBox1" 
        ClientEvents-OnKeyPress="filterListBox" SelectionOnFocus="SelectAll"runat="server">
    </telerik:RadTextBox>
    <telerik:RadListBox ID="RadListBox1" runat="server" Sort="Ascending"

    OnClientSelectedIndexChanged

     

    ="GetProgramName" >

     

            <Items>
                    <telerik:RadListBoxItem
                        Text="Kansas"
                        Value="KS" />
            <telerik:RadListBoxItem
                        Text="Kentucky"
                        Value="KY" />                    
                    <telerik:RadListBoxItem
                        Text="Texas"
                        Value="TX" />
                    <telerik:RadListBoxItem
                        Text="Missouri"
                        Value="MO" />
                    <telerik:RadListBoxItem
                        Text="Nebraska"
                        Value="NE" />
                    <telerik:RadListBoxItem
                        Text="Neubraska"
                        Value="N1E" />                                        
                    <telerik:RadListBoxItem
                        Text="New Mexico"
                        Value="NM" />
                    <telerik:RadListBoxItem
                        Text="Oklahoma"
                        Value="OK" />
                    <telerik:RadListBoxItem
                        Text="Arizona"
                        Value="AZ" />
                    <telerik:RadListBoxItem
                        Text="South Dakota"
                        Value="SD" />
                    <telerik:RadListBoxItem
                        Text="Colorado"
                        Value="CO" />
                    <telerik:RadListBoxItem
                        Text="Iowa"
                        Value="IA" />
      
                    <telerik:RadListBoxItem
                        Text="Illinois"
                        Value="IL" />
              
                </Items>    
    </telerik:RadListBox>
        </div>
         
    <script type="text/javascript">
     

    function

     

    filterListBox(sender, e) {

     

     

    var list = $find("ctl00_Content_lstSelectPgm");

     

     

    var searchText = sender.get_value() + e.get_keyCharacter();

     

     

    var items = list.get_items();

     

     

    for (var i = 0; i < items.get_count(); i++) {

     

     

    var item = items.getItem(i);

     

     

    var SelectPrgm;

     

     

    if (item.get_text().toLowerCase().startsWith(searchText.toLowerCase())) {

     

    item.select();

    item.ensureVisible();

    item.scrollIntoView;

    SelectPrgm = $find(

    "ctl00_Content_txtSelectPgm")

     

    SelectPrgm.set_value();

    SelectPrgm.set_value(searchText);

     

    break;

     

    }

    }

    }

     

    function

     

    GetProgramName(sender, args) {

     

     

    var SelectPrgm;

     

    SelectPrgm = $find(

    "ctl00_Content_txtSelectPgm")

     

    SelectPrgm.set_value(

    '');

     

    SelectPrgm.set_value(sender.get_selectedItem().get_value())

    document.getElementById(

    "ctl00_Content_cmdOk").disabled = false;

     

    document.getElementById(

    "ctl00_Content_txtSelectPgm")

     

    }

       

    </script>        
        </form>
    </body>
  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 24 Aug 2011 Link to this post

    Hi Ramesh,

    I tried your sample code and there are some missing elements and it is not possible to run it. Please send me a working sample project to investigate it locally.

    In case that you want to use keyboard navigation make sure you have the TabIndex property set beforehand. For additional information please consult with the following demo.

    All the best,
    Peter Filipov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ramesh kumar Kuppusamy
    Ramesh kumar Kuppusamy avatar
    36 posts
    Member since:
    Apr 2010

    Posted 24 Aug 2011 Link to this post

    Hi Peter

    I have attached the working sample code.
     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>ListBox Filter Starter Project</title>
        <style type="text/css">
            div.notes
            {
                color: Red;
                font-family: "Segoe UI" , Arial;
                margin-bottom: 20px;
            }
            .RadListBox span.rlbText em
            {
                background-color: #E5E5E5;
                font-weight: bold;
                font-style: normal;
            }
        </style>
          
         <script type="text/javascript">
             function filterListBox(sender, e) {
                 var list = $find("RadListBox1");
                 var searchText = sender.get_value() + e.get_keyCharacter();
                 var items = list.get_items();
                 for (var i = 0; i < items.get_count(); i++) {
                     var item = items.getItem(i);
                     var SelectPrgm;
                     if (item.get_text().toLowerCase().startsWith(searchText.toLowerCase())) {
                         item.select();
                         item.ensureVisible();
                         item.scrollIntoView;
                         SelectPrgm = $find("RadTextBox1")
                         SelectPrgm.set_value();
                         SelectPrgm.set_value(searchText);
                         break;
                     }
                 }
             }
      
             function GetProgramName(sender, args) {
                 var SelectPrgm;
                 SelectPrgm = $find("RadTextBox1")
                 SelectPrgm.set_value('');
                 SelectPrgm.set_value(sender.get_selectedItem().get_value())
                 document.getElementById("RadTextBox1")
             }
            </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <div>
                Search:
                <telerik:RadTextBox ID="RadTextBox1" ClientEvents-OnKeyPress="filterListBox" SelectionOnFocus="SelectAll"
                    runat="server">
                </telerik:RadTextBox>
                <telerik:RadListBox ID="RadListBox1" runat="server" Sort="Ascending" OnClientSelectedIndexChanged="GetProgramName">
                    <Items>
                        <telerik:RadListBoxItem Text="Kansas" Value="KS" />
                        <telerik:RadListBoxItem Text="Kentucky" Value="KY" />
                        <telerik:RadListBoxItem Text="Texas" Value="TX" />
                        <telerik:RadListBoxItem Text="Missouri" Value="MO" />
                        <telerik:RadListBoxItem Text="Nebraska" Value="NE" />
                        <telerik:RadListBoxItem Text="Neubraska" Value="N1E" />
                        <telerik:RadListBoxItem Text="New Mexico" Value="NM" />
                        <telerik:RadListBoxItem Text="Oklahoma" Value="OK" />
                        <telerik:RadListBoxItem Text="Arizona" Value="AZ" />
                        <telerik:RadListBoxItem Text="South Dakota" Value="SD" />
                        <telerik:RadListBoxItem Text="Colorado" Value="CO" />
                        <telerik:RadListBoxItem Text="Iowa" Value="IA" />
                        <telerik:RadListBoxItem Text="Illinois" Value="IL" />
                    </Items>
                </telerik:RadListBox>
            </div>
      
             
            </form>
        </body>
    </html>
  5. Ramesh kumar Kuppusamy
    Ramesh kumar Kuppusamy avatar
    36 posts
    Member since:
    Apr 2010

    Posted 28 Aug 2011 Link to this post

    can anyone help me to solve the above mentioned issue.
  6. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 29 Aug 2011 Link to this post

    Hello Ramesh,

    Please review the attached project.

    Greetings,
    Peter Filipov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017