Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Autocomplete Listbox

4 Answers 251 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Ramesh kumar Kuppusamy
Top achievements
Rank 1
Ramesh kumar Kuppusamy asked on 22 Aug 2011, 04:07 PM

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>

4 Answers, 1 is accepted

Sort by
0
Peter Filipov
Telerik team
answered on 24 Aug 2011, 04:48 PM
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 >>

0
Ramesh kumar Kuppusamy
Top achievements
Rank 1
answered on 24 Aug 2011, 05:44 PM

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>
0
Ramesh kumar Kuppusamy
Top achievements
Rank 1
answered on 28 Aug 2011, 12:44 PM
can anyone help me to solve the above mentioned issue.
0
Peter Filipov
Telerik team
answered on 29 Aug 2011, 12:31 PM
Search.zip
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 >>

Tags
ListBox
Asked by
Ramesh kumar Kuppusamy
Top achievements
Rank 1
Answers by
Peter Filipov
Telerik team
Ramesh kumar Kuppusamy
Top achievements
Rank 1
Share this question
or